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Design your 
own font 


Follow our in-depth tutorials 
All the software you need on the disc! 


Photoshop, Flash, After Effects 
and more... 


Typography 
techniques 


e Mould type in Photoshop 
e / ayering and composition 
e Animation effects in Flash 
e Perfect Web type with TooStyle Pro 


The original "Web-in-a-box" solution. 


Red Hat Linux is the industry standard for 
web hosting. 


Microsoft Windows, the choice of small and 
large businesses alike. 


Sun Solaris 


The market leader for reliability and performance. 


Your servers safe in our Data Centre. 


Select Specification 


RaQ 128 

128MB/20GB/5 GB Data Transfer 

RaQ 256 

256MB/20.4GB/20 GB Data Transfer @150 
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512MB/30GB/30 GB Data Transfer @J50 > 
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256MB/40GB/15 GB Data Transfer 
512MB/2x80GB/25 GB Data Transfer 
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Celeron 1Ghz/128MB/40GB/10 GB Data Transfer 
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PIll 1.13Ghz/256MB/60GB/20 GB bata Transfer 
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Ultra || Mail Server/100 GB Data Transfer 


3xUltra Il Web Servers/Ultra Mail Server/ 
Enterprise Database Server/ 
250 GB Data Transfer 


4xEnterprise Web Servers/Xeon Database 
Server/Enterprise Mail Server/ 
400 GB Data Transfer 


Sun Fire V100 128 @ap 
500MHZ/128MB/40GB EIDE/ 
20 GB Data Transfer 


Sun Fire V100 128 1GB@ap 
500MHZ/1GB/2x40GB EIDE/ 
30 GB Data Transfer 


Your server safe and secure in our Data 
Centre. Choose from a range of data transfer 
(bandwidth) per month and benefit from 
24/7/365 unlimited technical support. 


Select Security 


yer Montn 
¢ 


Protect your machine from unwanted visitors. 
Web based control panel allows you to add 
rules and deny undesirable visitors. 


per month 
Running databases, holding customer 
information or involved in e-commerce? If 
your answer is "yes" then order backup now 
and benefit from free restores if required! 


The ultimate tool for knowing how your 
server is operating and running. Pre-empt 
critical failure and minimise server downtime 
with messaging via e-mail or SMS. 


Firewall, Daily Backup and Advanced 
Systems Monitoring bundled to save over 
£600 per year! The complete solution to your 
Web hosting security. 


Relax with... 


Unlike most of our competitors we do not 
charge for technical support or aftersales 
service. Available with every Dedicated 
Servers product, you can call or e-mail our 
support team on an unlimited basis, 24/7/365. 


Standard SLA: 

Our Industry leading SLA is your guarantee of 
a totally reliable service. We'll pay you if it's 
not! Benefit from 99.9% connectivity, 30 
minute reboot guarantee, 1:1 contention ratio 
on bandwidth and a price freeze-forever! 


Advanced SLA: 

Specially tailored for Enterprise level services 
and above, the Advanced SLA is perfect 
for mission critical sites. Backed by a 
money back guarantee, benefit from 
99.999% connectivity, two hour hardware 
resolution, 30 minute reboot guarantee, 1:1 
contention ratio on bandwidth and a price 
freeze-forever! 
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WEBpplian 


@windows version 


Free Ensim software pre-installed and ready to run on every 
Linux and Windows server! 


This industry-leading, web hosting platform allows our resellers and customers to manage their 
hosting environment and administer their server with no technical ability. Ownership of the 
administrative functions and configuration of your own server will delight your customers, 
maximize performance and minimize costs. Ensim will transform your Dedicated Server into an 
easy-to-use, web hosting appliance that's ideal for web developers, designers and single site 
users alike. 


For resellers: 


Set-up shared hosting accounts 

Control panels for your customers 
Integrated DNS support 

Full bandwidth management 
Customisable private label control panels 


For single site users: 


Your own server (no sharing!) 

Easy back-up & restore 

Web-based e-mail 

Detailed on-line help & manual 
Real-time web-based control panels 
SSH Access 


Free with Linux & Windows Servers 


Contact Us 


W: : 
We constantly monitor the competition and know we offer the best value, feature-for-feature dedicated 


hosting in Europe. We are after all, the generic name associated with scaleable, secure hosting. We 
will beat any like for like quote...try us! 
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supporting 


Host 
online Europe 


for business 


> 
© - Call us and place your order via 
credit card or direct debit before 
4:00 p.m. (Monday-Friday) and 
we'll have your server up and 
running on the same day! 


oe 


Our UK Data Centres are 
designed, owned and managed 
by us. Situated in London and 
Nottingham, they benefit from the 
latest security, backup, power 
and climate control features 
available. 


At Dedicated Servers, we are 
committed to providing you with 


the highest levels of customer 
service, covering all aspects of 
the customer relationship 
including: | communications, 
accuracy, performance, privacy, 
security and complaints 
procedures. 


Our great new promotion gives you a huge 
bonus if you take out any dedicated server 
with a value of £2000 or more and pay for the 
year in advance. Each pack includes 5 books 
that will help you get the most out of your 
dedicated server as well as Host Europe 
merchandise. We will post out your bonus 
pack as soon as your server is setup. 


For a strictly limited period, Dedicated Servers 
will enable Advanced Systems Monitoring on 
your dedicated server absolutely free, forever! 
Available with every server over £199 per 
month! Call now and don't miss out! 


Your peace of mind. 
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The rites... 


[Treating type ceed ance 


for type makers and type users. The fifth annual TypeCon 


4 
will be held from 17-20 July, 2003, in Minneapolis, 
Minnesota, USA. Presented by the not-for-profit Society 
of Typographic Aficionados (SOTA), TypeCon features 
workshops, presentations, panel discussions, type and 
Our Expe S bring You GU professional graphic design galleries, and plenty of opportunities for 
‘ g ie business networking and socialising. To find out more 
guidelines for creating better tyoograony. .. about SOTA, please visit [w] www.typesocietyorg, or 
iS a ; email [e] info@typesociety.org. 
hese days, an artist has to wear many hats. In the course of a day, you might 
develop a Flash intro for a Website, design a poster for an arts festival, go to 
lunch with a client, then turn around and struggle with a cranky laser printer all a > B.C nk 
afternoon. With so much work to do, sometimes it’s easy to forget the basics. 
And quality typography, one of the essential building blocks of communications, is all too 
often the first thing to go. But if the type’s not right, the work will suffer — and that’s not 
good for anyone. 
a We've asked a group of type designers and typographers for their favourite 
O, typographical tips. This panel of experts agrees that, while creative rules were made to 
be broken, the basic ‘rules’ of good typography should never be ignored. > 
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2 Part 71; Rules and recommenaations 


6. Seasoning the mix 


True small caps are not merely scaled down 
versions of full caps. They differ in weight, fit, and 


1. Apostrophes revisited 


Did you know every font contains the ASCII 
apostrophe (or ‘prime mark’) to the right of the 


4. A river runs through it 


When setting justified body copy, you'll sometimes 
end up with strange word spacing. This can create 


semicolon, as wellas the ‘hidden’ typographer’s 
apostrophe? Proper typographic use requires the 
typographer’s version, accessed on the Macintosh 
by typing Option-Shift-], and on the PC by typing 
Alt-0146. To automate this substitution, set your 
layout application preferences to use smart quotes 
(QuarkXPress) or typographer's quotes (Adobe 
InDesign). Typing &#146; will display the 
typographer’s apostrophe in HTML. 

Brian Sooy, Brian Sooy & Co. 

[w] www.briansooyco.com 


“Wrong” “Right!” 


"That's nothow “This is how 
its supposed we're going 
to look’ to do it” 


False quotes appear on the left, with true typographer’s 
punctuation on the right. Top: Whiskers AOE, Astigmatic One Eye, 
Brian J. Bonislawsky, designer. Middle: Vineta, Bitstream, Ernst 
Volker, designer. Bottom: STF Veritas, Altered Ego Fonts, Brian 
Sooy, designer. 


2. Hyphenation consternation 


Hyphens are fine for compound words, but they 
don't belong at the end of a line of type. Do what you 
can to keep hyphenation to a minimum. Manually 
break lines, subtly adjust horizontal spacing, or 
slightly edit text to eliminate unwanted hyphens. 
The occasional hyphenated line-break is 
unavoidable, but don't have hyphens at the end of 
more than two consecutive lines. There should 
always be two or more characters before a 
hyphenated line ending, and at least three 
characters of the broken word at the beginning of 
the next line. Never let the second half of a 
hyphenated word, or a word with less than four 
characters, sit alone on the last line of a paragraph. 

Tamye Riggs, Society of Typographic Aficionados 

[w] www.typesociety.org; www.typelife.com 


3. Hang that punctuation! 


The most beautiful typography uses hanging 
punctuation. Beginning and ending quotes, line-end 
hyphens, periods, and ellipses should be hung in the 
margin for flush left and justified text setting to 
avoid ‘holes’ in the text. InDesign and Macromedia 
FreeHand both have preferences for this, but in 
QuarkXPress, you'll have to manually set a non- 
breaking space before the beginning quote, and add 
negative tracking between the non-breaking space 
and the beginning quote to achieve the effect. 

Brian Sooy, Brian Sooy & Co. 

[w] www.briansooyco.com 


the appearance of rivers’ running through your text. 


Brick quiz whangs jumpy 
veldt fox. Quick wafting 
zephyrs vex bold Jim. 
Sphinx of black quartz 
judge my vow. The five 
boxing wizards jump 
quickly. Mr. Jock, TV quiz 
Ph.D., bags few lynx. Pack 
my box with five dozen 
liquor jugs. Jackdaws love 
my sphinx of black quartz. 
Sympathizing would fix 


Brick quiz whangs jumpy 
veldt foxf§Quick wafting 
zephyr: x bol im. 
Sphin lac uartz 


judg ow Ms heffive 
boxin izar ump 
quickl r. Joc quiz 


Ph.D., bags few lynx. Pack 
my box with five dozen 
liquor jugs. Jackdaws love 
my sphinx of black quartz. 
Sympathizing would fix 


Examples are set in Verdana, Microsoft typography, designed by 


Matthew Carter. 


If the line length (also called measure) is short, set 
the text flush left/ragged right. 


Brick quiz whangs jumpy 
veldt fox. Quick wafting 
zephyrs vex bold Jim. 
Sphinx of black quartz 
judge my vow. The five 
boxing wizards jump 
quickly. Mr. Jock, TV quiz 
Ph.D., bags few lynx. Pack 
my box with five dozen 
liquor jugs. Jackdaws love 
my sphinx of black quartz. 
Sympathizing would fix 


Brick quiz whangs jumpy 
veldt fox. Quick wafting 
zephyrs vex bold Jim. 
Sphinx of black quartz 
judge my vow. The five 
boxing wizards jump 
quickly. Mr. Jock, TV quiz 
Ph.D., bags few lynx. Pack 
my box with five dozen 
liquor jugs. Jackdaws love 
my sphinx of black quartz. 
Sympathizing would fix 


If you have room for a wider measure, and you really 


must have your text justified, remember this rule of 
thumb: the line length in picas for justified text 
should be about twice the point size of the type. If 
your font size is 10 point, your line length should be 
around 20 picas. 


Brick quiz whangs jumpy veldt fox. Quick wafting 
zephyrs vex bold Jim. Sphinx of black quartz judge 
my vow. The five boxing wizards jump quickly. Mr. 
Jock, TV quiz Ph.D., bags few lynx. Pack my box 
with five dozen liquor jugs. Jackdaws love my 
sphinx of black quartz. Sympathizing would fix 
Quaker objectives. 


James Grieshaber, Typeco 
[w] www.typeco.com 


5. To justify, or not to justify? 


There are two schools of thought regarding the 
justification or non-justification of body copy. Some 
say text set with a ragged right margin interrupts 
the flow of reading. Others insist that the horizontal 
spacing problems and excessive hyphenation that 
often result from justifying text are far more 
distracting than a ragged right margin. Expert 
typographer Robert Bringhurst suggests this 
compromise in The Elements of Typographic Style: 
“Set ragged if ragged setting suits the text and the 
page.” In other words, you can use your judgment on 
the aesthetics of the ragged vs. justified issue — as 
long as you make it easy to read the text. 

Tamye Riggs, Society of Typographic Aficionados 

[w] www.typesociety.org; www.typelife.com 


proportion, being designed to match the colour 
(tone) of the lower case. Putting passages of text in 
small caps is pointless: no matter how artful the 
setting, people will not be bothered to read it. The 
real value of small caps lies in their ability toadd a 
dash of variety to complex settings, while 
maintaining the aesthetic convenience of a single 
typeface family. 

Nick Shinn, Shinn Type Foundry 

[w] www.shinntype.com 


7. Use italics for accents 


Italic fonts can be mixed with almost any other 
typeface. Try it; it really works! An italic design from 
a serif font can even be combined as a headline 
with a sans serif text font to create an exceptionally 
striking contrast. Italic fonts slant to the right, and 
are typically spaced tighter than their roman 
counterparts. When selecting a word to change into 
italic, be sure you also select the space 
immediately before the word. This will help reduce 
excessive gaps between italicised and roman 
words; use manual kerning between these words as 
needed to even out the space. 

Allan Haley, Agfa Monotype 

[w] www.fonts.com 


8. Mind your ems and ens 


Fonts usually have three dashes in their character 
set: the hyphen, the en dash, and the em dash. The 
hyphen (short) is used to connect the pieces of 
compound words, or to divide words that break at 
line endings. An en dash (medium) is used to 
indicate a range of dates, page numbers, or other 
values. The em dash (long) is used to indicate an 
abrupt change in thought, or to set off a separate 
idea within a sentence, etc. If an em dash ina 
typeface looks too wide, use an en dash instead. 
You may add a tiny bit of space before and after an 
em or en dash if you like. And — most importantly — 
never use two hyphens in place of an em or en dash! 

Tamye Riggs, Society of Typographic Aficionados 

[w] www.typesociety.org; www.typelife.com 


9. Reversing roles 


Type that prints fine in black on white is often 
illegible when reversed to white on black. It’s 
surprising how often one sees, even in well- 
designed publications, a box or pull-quote where 
the type is knocked out of a dark colour and breaks 
down. If the text type is used in reverse, it should at 
least be made bigger or, preferably, set in bold, orin 
asans serif. 

Matthew Carter, Carter & Cone 


10. The luxury of ligatures 


The ‘f' ligatures are designed for discretion, to 
replace ungainly couplings with smooth, composite 
characters. Conversely, there are ligatures that add 
noticeable affectation to text. Another class of 
ligatures is for tight layouts — providing flexibility 
with letter combinations of alternate width, or 
minimising the white space between characters. 
The fi(Option-Shift 5) and fl (Option-Shift 6) are 
included in many fonts (Mac, not PC), but the 
location of extra ligatures varies, being either: 

on the base fonts (replacing obscure math symbols) 

*onan expert font 

«nowhere; many faces have only one expert font, with 

small caps/old-style figures, but no extra ligatures. 
Nick Shinn, Shinn Type Foundry 
[w] www.shinntype.com 


fi fi fl fl 


Fig. 1 Fig. 2 Fig. 3 Fig. 4 


Fig, 1: The f's terminal and the i’s dot are apt to bump awkwardly. 
Fig, 2: The single character solution has design integrity. 

Fig. 3: The f-l pairing is too heavy up top, too empty inside. 

Fig, 4; Its ligature is attractive in its own right. Examples set in 
STF Veritas. 


11. Less is more, more or less 


Today’s designers have access to a wealth of unique 
display fonts. The impulse when you get a new font 
(or any cool new thing, for that matter) is to use it as 
much as possible. This may be good in some 
instances, but judicious use and careful selection of 
type will really make a difference in your work. If 
you've got a very ornate display font, use it for 
headlines or drop caps. Using ‘busy’ type designs 
for large blocks of text can interfere with 
readability, and usually doesn't look terribly 
attractive. Pair up complementary fonts, and limit 
the number of fonts used on one page — the results 
will be cleaner and more visually appealing. 

Richard Kegler, P22 type foundry 

[w] www.p22.com 


12. Optical illusions 


Much of good typography is about how things look. 
Optical alignment is usually more important than 
mathematical accuracy. 
« Sometimes line spacing in headlines containing 
three or more lines must be adjusted to look even 
« Left-aligned headlines beginning with round or 
diagonal letters should overhang the margin 
«Align photos and graphics with the x-heights of text 
in adjacent columns, not the cap height 
e Punctuation in headlines almost always looks 
too large. Reduce it a point or two to make things 
look right 
Allan Haley, Agfa Monotype 
[w] www.fonts.com : 


13. Straight shooting with bullets 


Typographic bullets are simply round dots. They 
can be solid or just an outline, and come in two 
standard sizes: em bullets (which are almost as big 
as Capital letters) and en bullets (which are about 
half the size of em bullets). When typeset, both 
varieties are centred vertically on the height of the 
capital letters. 


Below are some rules of thumb on how to use bullets. 


Em bullets: 
@ are almost always too big 
@ SHOULD BE LIMITED TO USE WITH CAP LETTERS 
O should be set in outline form for minimum 
text disruption 


En bullets: 

@ Should centre on cap height when they begin a line 

e should centre on lowercase x-height when used with 
lowercase text 


En bullets can be set even smaller when: 

«less emphasis is required 

«very many or very few bullets are used 

they're used with a typeface that has a small x-height 
«they're used with a condensed typeface 

Allan Haley, Agfa Monotype 

[w] www.fonts.com 


14. Figuratively speaking 


The size of a font’s figures (numbers) can 
sometimes cause visual problems. Lining figures, 
which are typically the same height as the capital 
letters, look fine in an all-caps text setting or in 
headlines. But in a block of lowercase text, these 
‘uppercase’ numbers look ungainly and overpower 
the neighbouring letterforms. Elegant and readable 
text setting demands the use of old style figures. 
Conversely, ‘lowercase’ figures shouldn't be stuck 
in the middle of a line of caps. The problem? The 
basic character set of most digital typefaces offers 
lining figures only. 


WINTER 2002 WINTER 2002 
Winter 2002 Winter 2002 


WINTER 2002 WINTER 2002 
RIGHT WRONG 


Examples set in Century Oldstyle, Kingsley/AFT, Linn Boyd 
Benton and Morris Fuller Benton, designers. 


Look for typefaces that feature expert sets — extra 
fonts matching the design of the base fonts — which 
typically feature old style figures, as well as 
ligatures, ornaments, swashes, true fractions and 
other typographic treasures. 

Tamye Riggs, Society of Typographic Aficionados 

[w] www.typesociety.org; www.typelife.com 


15. The ups and downs of caps 


Drop caps and elevated caps should have the text 
that follows nicely fitted. Traditionally, the first word 
or phrase after the drop cap is set in caps or small 
caps, to provide a transition zone that eases the 
reader into the text. 

Nick Shinn, Shinn Type Foundry 

[w] www.shinntype.com 


E’RE given no choice but to 

drown in our sorrows. If I had 

half a chance, I would die for to 

leave. For nine days, I floated through 
the Florida straits. My four days of water 


REEDOM AWAITS THOSE who share 
in the pain, of a life without hope, and 
the daily refrain. Oh, Lord, please stop 
my hunger, shelter me from the rain. 


ND THE DAILY REFRAIN. Oh, Lord, 
An stop my hunger, shelter 
me from the rain. On the island 

of pain, we forsake our tomorrows. 


danced with the sharks—oh, but 
I’m still alive. A Cuban armada on 
the straits of freedom. A fleet full of 
souls on a sea full of dreams. We pray to 


BS EEN GONE THE LAST FIVE. I have 


Fig. 1: Drop caps are a great opportunity for typographers to 
practise their craft. It’s fun to experiment with letters such as [, V, 
W, and ¥ hanging the left arm into the margin — and this can give an 
edge to an otherwise rigid page layout. Cap set in Zapf Chancery 
Italic, Hermann Zapf, designer. Text set in URW Antiqua. 


Fig. 2: The initial cap can be set in a different typeface from the 
text, or the same — but if it's a serif typeface, a display version 
should be used for the large cap, not just the text font at a larger 
size. Cap set in Goudy Handtooled, Frederic W. Goudy, designer. 


Fig. 3: Fitted drop caps are especially important when the first 
letter is A or I, because the reader may otherwise wonder whether 
the initial letter is itself a word. Cap set in Goudy Handtooled, 
Frederic W Goudy, designer. 


Fig. 4: The top of the drop cap should line up with the top of the 
following text. Cap set in URW Grotesk. 
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16. Word space vs. line space 


Don't make the word space larger than your line 
spacing! It happens in headlines and body copy, and 
it makes reading difficult — and it just looks bad. 

It’s a pretty basic rule of thumb, but you still see it 
happen allthe time. 


When yourword spacing is larger than the line 
spacing (leading) in a stacked headline, the gaps 
tend to break up the words visually in ways the 
phrase was not intended to be read. In this example, 
the eye wants to group together the words, “Say | Do. 


Examples set in Glyphic Neue, lypeco, James Grieshaber, designer. 


” 


To solve the problem, add a bit of leading. If that’s 
not enough to make the text readable, you may 
need to kern between the words a bit — the built-in 
word space is a little too wide for a headline setting. 
James Grieshaber, Typeco 
[w] www.typeco.com 


17. Be nice to your fonts 


Never set a script typeface in all caps. It looks 
horrible, it was never intended to be set that way, 
and it makes your work look less than amateurish. 
And don't play the Marquis de Sade with your fonts. 
Don't put them on the stretcher and stretch them 
taller or pull them wider. Instead, find an 
appropriate weight of a font to use that was 
designed and drawn with the proportions you need. 

Stuart Sandler, Font Diner 

[w] www.fontdiner.com 


ZESAV NE 
Gijarne Lh HE. 


Examples set in P22 Cézanne, copyright 1996 Philadelphia 
Museum of Art. 


18. Fun with alternate characters 


There are many display fonts that include not only 
full international-charactersets, but also feature 
alternate characters to allow for occasional 
substitutions. The examples below demonstrate 
cases where alternates are desirable. 


EVERYTHING 
EVERYTHING 


P22 John Cage presents alternates of each letter in 
the upper and lower case positions. These allow for 
a more natural hand lettered look — especially 
when several letters repeat themselves. 


A) /t 


P22 Cézanne offers alternates for some of the more 
decorative characters (such as the ‘t’ and the ‘d’). 
When t's are used more than once ina word, they 
overlap with other tall ascender letters, and the 
appearance of the word becomes cluttered. Using 
alternates makes the simulated handwriting appear 
more pleasing and natural. 


LLOYD 
[Lox 


P22 Arts and Crafts has built-in ligatures and 
alternates that allow for decorative Mission-style 
lettering effects. It takes a little time to find the 
best combination, but the results are worth the 
effort. 

Richard Kegler, P22 type foundry 

[w] www.p22.com 


‘Everything’ set in P22 John Cage, produced by P22 for The 
Museum of Contemporary Art, Los Angeles, in cooperation with 
The John Cage Trust. ‘Attitude’ set in P22 Cézanne. ‘Lloyd’ set in 
P22 Arts and Crafts. 
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19. The layered look 


Some interesting typography can be achieved with 
layered type. For example, combine ShinnType’s 
Bodoni Egyptian Shadow (black) with the Bold 
variant (white) to achieve a multicolored effect: 


Fill Fill 


Examples set in Bodoni Egyptian, ShinnType, Nick Shinn, designer. 


Using Adobe /llustrator: 

1. Set text in ‘Bold’ font in white 

2. Copy 

3. ‘Paste in Front’ 

4. Click on ‘Shadow’ and ‘Black’ to change the type 
you have just pasted. 

5. Select both texts, and group, for subsequent 
ease of use 


Using QuarkXPress: 
1. Set text in ‘Bold’ font in white 
2. ‘Step and Repeat’ with zero offset 
3. Click on ‘Shadow’ and ‘Black’ to complete the effect 
4. Select both text boxes, and group, for subsequent 
ease of use. 


Advanced: 
1. Tighten up the tracking 
2. Position the Fill font in front, to cover up the 
overlaps in the Shadow font. The amount of the outline 
left showing depends on the typeface. Here, the 
outline is thinned, because the Bold and Shadow fonts 
in Bodoni Egyptian are designed to trap. 
Nick Shinn, Shinn Type Foundry 
[w] www.shinntype.com 


20. Cascading Style Sheets 
unmasked 


You can achieve consistent on-screen type for any 
web site by creating a style sheet with three basic 
styles: body, p and td. Assign the same font style and 
size to all three styles, and all type elements on your 
page will be the same size. Be certain to set your size 
in pixels (for example, 12px) since all other formats are 
relative (10px is the minimum size you can use for all 
browsers). The result will be similar-looking pages on 
any browser and platform. 


Part 2; Spacing and kerning 


21. Invisible success (Fit Theory) 


When it comes to completing a successful type 
design, nothing can reduce the chances of that 
happening more than a poorly fit font. The most 
finely rendered shapes will be for naught if the 
characters do not interact well and predictably 
with one another. Good spacing is another one of 
those invisible successes; only poor fitting will 
be noticed. 


22. Letter fit, then kern: Order 
is important 


The order of these tasks is crucial to a successful 
typeface. First, establish an appropriate letter fit, 
apply it to the entire font, and then finally, kern 
specific character pairs to fix what letter fit cannot 
address. If you find yourself kerning standard 
character combinations such as bo, no and the like, 
then chances are you didn't get the letter fit right. In 
that case, stop kerning and revisit the letter spacing. 


23. Basics of letter fitting 


The most difficult part of spacing a typeface is 
finding the right visual balance, or ‘colour’. A good 
fit depends on the stroke weight and body width of 
the typeface, and at some point, it can be very 
subjective. But there are some basic rules of thumb 
to get you in the ballpark: 


« Generally, the heavier the stroke weight and the 
narrower the width, the tighter the fit. 

« Square character shapes require more fit; round 
shapes require less. 

«Italics usually fit tighter than their roman 
counterparts. 

+ Display designs are usually fit tighter. 


24. Spacing typeface families 


When developing a family of several weights, you 
should endeavour to determine the control 
character fits of all the family members at the same 
time; this way, fits forthe entire family will be 
consistent with one another and the family will work 
well together. The letter fit of bold weight, for 
instance, should be tighter than roman. 


& 


s 
& 
> 


25. Spacing fundamentals 


The fit, or the space between any two characters, is 
the sum total of the right side bearing of the first 
character and the Left side bearing of the second 
character. Theirfits differ by virtue of their basic 
designs; the straight characters require the most 
space around them, while the curved characters 
require less space because the curve stroke 
occupies less of the surrounding negative space. 
Depending on the design, the flatter a curve stroke 
becomes, the closer the side bearing should 
approach that of the straight stroke. 


26. Control string 


The theory behind control characters is to use a 
small subset of characters to establish fits. The 
control characters possess the typical features and 
spacing combinations of the majority of the 
typographic set: HDHHOHOOhnnonoopo00 

The typical order for widest to narrowest fit is: 
HH, nn, OO,” 00 and oo. Although they may not be 
directly related by shape, the fits of almost all of the 
other characters are determined in some way by 
the spacing relationships of the control characters. 


27. Extreme move rule 


When establishing spacing and kerning, if you find 
you cant decide one way or another (tighter or 
looser), make an extreme move, such as fitting the 
characters really close. Then back it off. 


28. Basic kerning rule 


It's critical to remember the difference between 
spacing and kerning. Spacing creates the rhythm 
between the black and white of the characters — 
the balance that allows the font to read properly. 
Kerning fixes what general spacing cannot do, by 
allowing you to improve the spacing between 
specific character combinations. 


29. Kerning symmetrical 
characters 


Character pairs consisting of symmetrically 
designed characters should have the same kern 
values on left and right. For example, OTO, OVO. 


30. Kerning: Using words 


The best way to assess kerning is by using words. 
The context of a word will help you decide if 
kerning is too tight or too open. EE 


Main Whiter: Tamye Riggs 
Tamye Riggs is a freelance graphic designer, writer, 
editor, and typographer located on the West Coast of 
the United States, She is the co-editor of four books 
on typography and motion graphics, including the 
just-released Indie Fonts, a compendium of digital 
type from independent foundries. Riggs also serves 
as the director of the not-for-profit Society of 
Typographic Aficionados and its annual conference, 
TypeCon2003. Read more about type designers and 
their work, and their lives at her pet project, 
[w] www.typelife.com. 


) LYIES 

Jim Lyles is Director of Typographic Development at 
Bitstream Inc. He has worked in the type business 
since 1980, when he first learned type design at 
Mergenthaler Linotype in New York. He then worked 
for a year at Techni-Process, a headline type house 
upstairs from Photo-Lettering, Inc., on 43rd Street. 
He left New York in 1985, taking up residence at 
Bitstream in Cambridge, MA. Lyles holds a Bachelor 
of Science in Fine Art degree from Valparaiso 
University, and worked on his MFA in drawing and 
printmaking at Pratt Institute during his tenure at 
Linotype. [w] www. bitstream.com 


e Zafarana 
Sue Zafarana is Director of Custom Type Production 
at Bitstream Inc. She began her career in type when 
she joined Compugraphic (Agfa) in 1977, where she 
took part in the development of their phototype 
library. She then assisted in the conversion to digital 
data in the early 1980s. Zafarana joined Bitstream in 
1984, spending the first two years designing digital 
type at massive modified Camex workstations. She 
then slid over to the custom group and has been there 
ever since, serving the last 10 years as its director. 
She holds a Bachelor of Fine Art degree from 
Westfield State University. [w] www.bitstream.com 
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l 
Typography has always been about 
upsetting the status quo through 
technology and design innovation. 


Where has it come from and where 
is it going? We take a look... 


g Expertise provided by Graeme Aymer. 
| You can contact Graeme at 
[e] graeme.aymer@futurenet.co.uk. 


a 
4 


ypography is one of the most difficult aspects of design. Not only do 
you have to be visually creative, you also have to worry about 
technical details involving the readability, kerning and tracking of 
your alphabets. For package design, you’ve got to make sure your 
product stands out without confusing potential buyers about what 
the product actually is. And in terms of signage, well, it’s a case of 
standing out enough to be seen, while not being obtrusive. 

We’re constantly bombarded with messages from all corners of 
this so-called developed world. There are buses telling us that 
xXx is a new type of secret agent, print adverts informing us that 
Joey Negro is presenting the album Jakata (which we’re informed 
in subtle sans serif capitals includes samples from the soundtracks 
of American Beauty, Betty Blue and the Shawshank Redemption), 
and the faux stencilling of the Manic Street Preachers’ CD1 cover for 
There By the Grace of God. 

Typography has always been about two things: technology and rule 
breaking. It’s followed the craft from its earliest days of the printing press, 
through to David Carson's craziness with RayGun magazine in the 1990s. 
And it doesn’t look like it’s going to change. 


The birth of type 
We can mark the beginnings of typography as we know it today at the invention of 
the printing press. Though it’s disputed by some, Gutenberg’s press printed 
the first mass-produced book in 1454: the Gutenberg Bible. His invention 
was a revolution in itself. Within 50 years of the pressing of the 
Gutenberg Bible, over 1000 printers set up shop in over 200 
cities in Europe. Of course, both Church and State were 
alarmed at the ease with which ideas began to circulate, 
and they brought in censorship decrees in vain attempts 
to regulate its use. 

It was also curtains for scribes, who made a 
living out of copying books by hand with quill and 


ink. Moveable type meant the end of their industry. Funnily enough though, it also meant the 
birth of typography in its modern sense. It saw the rise of designers like Claude Garamond, 
who is credited as being the first person to specialise in type design as a service to publishers. 
His first Roman font was used in the 1530 edition of a volume lovingly entitled Paraphrasis in 
Elegantiarum Libros Laurentii Vallae. More importantly, Garamond and his contemporaries 
followed what had come before: handwriting. 
Between the sixteenth and early nineteenth centuries, the printing press changed very little. 
It was an era that saw the proliferation of ideas, from the Protestant Reformation, and 
revolutions in the United States and France, as well as civil war in Britain. 
Type designers also established themselves. Giambattista Bodoni, for example, worked 
from the late 18th to early 19th centuries, producing work for the 
European élite. Like Garamond, his success was 
due to the importance he placed on 
high production values. He also 
produced Bodoni Book 
in 1798, which 
raised the 
eyebrows 
of the 


design 

community. It was 

very crisp and clean, with 

thin, straight serifs. It reflected what 

was going on around him at the time: the 
beginnings of the industrial revolution. 


New technology 
As the 19th century drew to a close, the printing 
press itself was undergoing change. Machines like > 


¢ 
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Max Meidinger 


Where would we be without Helvetica? It’s a font that has been 
used, overused, consigned to history and then resurrected, 

and it’s likely to remain one of typography’s most enduring fonts 
for all time. 

It is the work of Max Meidinger, who was born in Zurich, 
Switzerland, on Christmas Eve, 1910. He trained as a typesetter 
between 1926 and 1930 at the Zurich Kunstgewerbeschule or Arts 
and Crafts School. After a spell as a sales representative for the 
Haas’sche Schriftgie§erei (Haas Type Foundry) in Munchenstein, 
he quit and became a freelance graphic artist in Zurich. 

His big break came in 1956 when he was asked by his former 
boss at Haas, Edouard Hoffman, to modernise one of the 
company’s Haas Grotesk san serif fonts for use in advertising. 
Thus he set to work on what was to become Neue Haas Grotesk, 
which went on sale the following year. In 1961, rights to the font 
were purchased by Germany's Stempel Foundry. The company 
developed a full series of weights based on the original designs, 
and renamed it Helvetica. 

Meidinger died on 8 March 1980. Other fonts he designed 
include Pro Arte, Helvetica Rounded and Horizontal. 


[w] www. fontexplorer.com 


Jonathan Barnbrook 


Typography is not merely letter shunting to Jonathan Barnbrook. It 
is an agent of change. He believes that type should have some sort 
of social significance, and he designed such faces as Nixonscript, 
a font “with which you can lie”; an attempt at modern gothic 
blacklettering font called Bastard; and False Idol, designed to 
“mimic an atmosphere of glamour and sophistication but achieves 
only a certain fractured seediness” as it’s based on “bad rubdown 
lettering in 1970s pornographic magazines”. 

His satirical streak can be seen in such work as his 
Collaboration with Damien Hirst, not only on the Pharmacy 
restaurant, but also with the book / Want to Spend the Rest of My 
Life with Everyone, One to One, Always, Forever, Now. 

He's a graduate of St Martins and the Royal College of Art and 
is the brains behind Virus Fonts. His work is certainly pioneering 
and experimental. His book collaboration with Hirst, for instance, 
uses a number of devices including pop-ups, as seen in children’s 
books. Not only is his work innovative, they’re also given an edge 
by the designer's views on politics and contemporary culture. 

Fonts he’s designed include Patriot, Prozac, Coma and 
Expletive Script. 


[Ww] www. virusfonts.com 


the Linotype and the Monotype were lowering the cost of printing, while steam replaced 
manual labour to actually operate the machines themselves. It was the dawning of the age 

of mass production and social mobility, which meant that typography was about to face some 
brand new challenges. 

At the start of the 20th century, Art Deco, Art Nouveau and Bauhaus all influenced 
typography. Their design aesthetic was clean, eschewing the ornate. In terms of type design, 
they picked up on a forgotten movement that had outraged all and sundry a century earlier: the 
Grotesques. What was outragequs about these 
fonts was that they had no serifs, 
which was simply unheard of. 
Sans serifs were 
perfectly suited 
to the 


market economies of 
the first half of the twentieth 
century. Advertising was on the 
rise. People needed signs to show them 
where to buy goods or where to catch the 
train. Gradually, they needed type to tell them 
what movies to watch, what radio shows to listen 
to, and what magazines to read. 

Evidence of this is still all around us. In 1916, 
Edward Johnson designed his famous font for the 
London Underground. Around twelve years later, 
Paul Renner designed Futura, which is widely seen 
as the definitive sans serif font. At around the 
same time, Eric Gill designed his famous Gill Sans, 
still often used by the BBC. Not to mention Max 
Meidinger’s Helvetica, designed in 1957. 
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Xerox in full effect 

Perhaps we should pay homage to 
Xerox for moving typography to the 
next level. It had the foresight to 
realise, in 1960, that Chester F. 
Carlson’s ‘electric photography’ 
patent had a commercial use and so 
released the photocopier to the world. 
It paved the way for the birth of the 
fanzine during the late 1960s, but it 
was during the punk era that the 
genre really flourished. Fanzines 
meant that anyone could design a 
publication, and often featured 
extensive amounts of cutting 
and pasting, both in 
terms of imagery 
and type. 


Jonathon Barnbrook’s style is inspired 
by the gothic fonts created by Eric Gill 


Zuzana Licko 


When the Mac was launched in 1984, Zuzana Licko and her 
husband Rudy VanderLans were busying themselves with Emigre 
magazine. The new technology meant that creative magazine 
production was now easier than ever. However, its font palette was 
rather limited, and so Zuzana got on with the business of designing 
their own, first using bitmap technology, and eventually with 
PostScript technology. 

Emigre, both as a foundry and a magazine, showed the world 
just what was possible using digital technology. Licko’s work with 
her partner has earned the foundry numerous awards, including an 
American Institute of Graphic Artists Gold Medal in 1997. Emigre 
has also had its work exhibited in San Francisco’s Museum of 
Modern Art. Licko’s work with typography on computers revealed 
the extent of the digital publishing revolution. While Adobe and 
Apple must be credited with its technological birth, it is Emigre 
that provided the first clue of the changes that were due for the 
world of typography. 

Fonts designed by Zuzana Licko include Universal, Emigré, 
Matrix, Modula, Senator and Citizen. 


[w] www.emigre.com 


Eric Gill 


Strictly speaking, Eric Gill is not a typographer. Primarily, he was an 
engraver, using wood as his medium of choice. He was born on 22 
February 1882 in Brighton, and attended art school in Chichester. 
During his time at Central School for Arts and Crafts, Gill attended 
lettering classes given by Edward Johnson, who went on to create 
the famous typeface for London Underground. It was to have an 
influential effect on him later, when he went on to design Gill Sans, 
one of the BBC’s most used fonts. 

At the turn of the new century, he was known as a master 
craftsman, making engravings for title pages, lettering in stone and 
sign making. He rose to national prominence after his sculpting 
work for the BBC’s broadcasting house. 

His typography work was something of a collaborative effort. 
At the end of the 1920s, typographer Stanley Morison persuaded 
Gill to design type for print. Gill agreed, but didn’t much fancy 
working with the machinery that was required to produce lettering 
then. Therefore, a punch-cutter called Charles Malin was brought 
in to deal with the mechanical side of things, with Morison co- 
ordinating the two sides. 

Gill’s fonts include two series of Gill Sans, between 1928 and 
1930, Perpetua in 1929 and Solus in the same year. He was an 
often controversial artist as well as a typographer, and thanks to 
the BBC, his work is among the best known in the UK. Eric Gill 
died in 1940. 


Punk bands also designed their own record 
sleeves with the same aesthetic. It paved the 
way for the so called ‘grunge fonts’ of today. 
However, it also had a marked effect on budding 
graphic artist Neville Brody. He combined punk 
sensibility with influences like Dadaism and Pop Art. 
He also studied the ‘cut up’ technique of William 
Burroughs and Brion Gysin, where strips of text were 
snipped and recombined to yield entirely new meanings. 
It’s a technique he used on The Face magazine as its art 
director. Basically, Brody, with scalpel and Letraset, designed the 
affluent Britain of the 1980s. He blew up lettering, reduced it, 
distressed it, filled in holes, sometimes with a magic marker, all to 
produce camera-ready artwork. 
But Xerox’s work wasn’t over. In 1984, the Macintosh said ‘Hello’ for the first 
time. It was a tiny personal computer with not a lot of power. But it was based on the 
graphical user interface system, including the mouse, all invented at Xerox’s Palo Alto 
Research Centre (PARC). Furthermore, two former PARC employees, John Warnock 
and Charles Geschke, finally released the product that had caused them to leave 
Xerox in the first place. It was called PostScript, and it was the first product 
released by Adobe, also in 1984. In 1985, Steve Jobs’ Apple invested 
$2.5 million in the company to ensure the technology would be 
included in Apple’s new LaserWriter 
product. The final piece of the jigsaw 
came about when the two happened 
upon a start-up called Aldus that was 
making an application called PageMaker. 
Suddenly it was possible to lay out a 
magazine on a computer and send high 
quality output to an imagesetter. The 
desktop revolution had begun. 
It kicked off a movement that started 
with the birth of Emigre magazine, and its 
associated type foundry of the same 
name was set up in 1984 by Zuzana 
Licko and Rudy VanderLans. Licko 
started off making bitmap fonts, but later 
went on to produce type, using curves 
possible using PostScript. It in turn made 
it possible for a wave of designers like David Carson, Jonathan 
Barnbrook, Juan Gatti and Lucas de Groot to manipulate type in new 
and exciting ways. % 
David Carson, for example, rendered RayGun magazine almost unreadable 
due to his unusual layout style. De Groot used more conventional reworkings of 
fonts that had come before, such as Frutiger. More recently, computers have 
enabled the likes of Fe/t to experiment with moving images and type, 
while publications like eye, /.D. and Graphis were able to build on work 
done by Carson. 


BA 


The next step 

Where to next? It’s hard to tell. Certainly, the world 
has become even more consumerist at the start of 
the 21st century than it was 100 years 

previously. Typography now includes 

motion; think television commercials and 

film. There’s also room for interactivity > 
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Neville Brody 


Design in the 1980s would be nowhere without Neville Brody. He 
combined a punk attitude with artistic movements such as 
Dadaism and Pop Art, the photography of Man Ray and Laszlo 
Moholy-Nagy and the William Burroughs and Brion Gysin-inspired 
Cut Up technique to produce the decade’s look. Its greatest 
moment was during his period at The Face magazine, which lasted 
for five years starting in 1982. His work was copied back then by 
just about everyone hoping to tap into the decade’s aspirational 
ethos, which swept Britain during the Thatcher years. 

Brody also designed numerous record sleeves for Fetish 
Records between 1979 and 1987, including ten records for 
Cabaret Voltaire. He did something of an about face when he took 
over art duties at Arena magazine, becoming known for using bold 
Helvetica in lowercase for much of the design. He’s been featured 
in exhibitions at the V&A, and also wrote a book, The Death of 
Typography. He’s a founder of FontShop International in Berlin. 

Fonts he’s designed include Industria, Autotrace, Insignia, 
Arcadia, Typeface 4, Typeface 6 and Typeface 7. 


[w] www.fontshop.de 


David Carson 


David Carson was a Sociology teacher and surfer before he took 
some basic evening courses and became one of the most 
influential designers of his generation. He started his path with 
Beach Culture magazine at the start of the 1990s. He took his 
design ideas to RayGun in 1992. 

There, he used new fonts, many from Emigre, and he flipped 
letters and numbers to create new lettering. He also ignored grids, 
guttering and a range of other magazine design conventions, 
outraging and invigorating the industry. To some, it made the 
magazine unreadable, but then, if you couldn't understand it, you 
probably weren't the magazine’s intended audience anyway. His 
innovations can be seen in all magazines that aspire to reflect 
cutting-edge design, and have influenced — directly or indirectly - a 
range of contemporary type designers such as Germany's 
Designer Shock. 

He founded Garage Fonts in 1993 to distribute fonts used in 
RayGun, though he’s no longer involved with the site. He also runs 
David Carson Designs, producing Websites, including the cover for 
culture magazine The Mixture. He also designed the packaging for 
the Nine Inch Nails album The Fragile. And he’s responsible for two 
books: The End of Print, and Fotografiks. 

[w] www.davidcarsondesign.com 


[w] www.garagefonts.com 


thanks to the Internet. Flash means that one of the barriers to 
developing typography online —- browser compatibility — is being 
overcome. The likes of David Carson and Jonathan Barnbrook 
spend plenty of time bringing their design ideas to the Web. It 
also means that type designers like Nick Hayes at Identikal 
° can claim that his vision of typography is “communication 
through visualisation and sound”. 
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It’s also led to a type movement of 
its own, Pixel Fonts, where the point isn’t to 
avoid making letters look like they’re not made of pixels, 
but to embrace the blockiness and edges of the squares that 
make up the fonts themselves. This in turn enabled micro fonts — 
lettering almost too small to be read — to be used on sites to provide a 
cutting edge appearance. The Web has also led to the birth of a thriving, 
though admittedly not necessarily lucrative, trade in fonts. 
Maybe, however, just as we still use fonts designed by Garamond and Bodoni 
hundreds of years after they were created, there’s still room for classic design in 
future. “The age of techno fonts is on the way out,” says Identikal’s Nick Hayes. “The 
true typographers will release fonts that have an audience for all, but still have one foot 
in the past and one foot in the future. We term this ModernClassical.” 
Alias’s Gareth Hague is looking forward to something slightly different, but with an air 
of refinement. “I’m hoping for a non-referential, non-classical, forward-looking approach 
to beauty,” he says. Green Cathedral’s Design Director Jason Arber adds: “We will see 
more interesting letterforms emerge. The new typefaces will be more studied and refined 
than many new typefaces we’ve seen lately. | think generally we’re entering a period of 


typographic minimalism.” EE 


Look forward to anew 
world of fonts... 
www.identikal.com JAMES + DARCY. 
www.greencathedral.com @F SMASHING 


PUMPKINS ANB 
, THE NEW WAVE @F 
ARTIST- RUN 
LABELS 


www. virusfonts.com 
www.emigre.com 


RayGunis still seen as the magazine that single-handedly 
changed the way that graphic designers use type in print 
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The In-depth guide for digital creatives 


MOVING TYPE 


Price £24.95 Author Matt Woolman & Jeff Bellantoni 


oving Type is about spatio- 
/M\ temporal typography. Or type that 
moves, transforms, mutates, duplicates, 
blurs and interacts; existing only within 


the virtual realm of the computer screen. 


With the accompanying files on the CD, 
this book is as interactive as the type 
designs it illustrates. 

Preliminary chapters lay solid 
foundations in legibility, structure, 
framing and colour. Subsequent chapters 
look more closely at each of these 
elements as they’re applied to moving 
type. The concluding chapter then moves 


Publisher RotoVision ISBN 2-88046-369-6 


into the professional world with an 
excellent cross-section of work from 
some of today’s practicing designers 
such as Yugo Nakamura of MONO‘crafts 
and Joel Marcus of M:Design+Direction. 
This book illustrates clearly what 
can be achieved when type is allowed 
to move and express itself. The 
accompanying CD enabling readers to 
immerse themselves in each design and 
see first-hand how type can come alive. 


VERDICT 


5/5 


MAKING DIGITAL TYPE LOOK GOOD 


Author Rob Gordon Publisher Thames & Hudson 


Price £19.95 


his sumptuously presented 

| manualis a must-buy for anyone 
who is involved with specifying digital 
type. The book is divided into three main 
sections: the history of type, a host of 
specimen fonts, and an overview of 
some of today’s leading type foundries. 

This is not a manual of tutorials but 
an excellent reference resource. It 
not only illustrates how some of the 
leading fonts will look when printed in 
various point sizes but also allows an 
instant visual comparison to be made, 


ISBN 0-500-28313-3 


allowing the designer to choose font 
settings with ease. 

Supporting the more practical 
material is an overview of all the major 
type foundries, and also a close look at 
today’s practising type designers. If you 
need a type reference manual, but also 
want to learn a little more about the 
history of type and who is practising font 
design today, look no further. 
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PHOTOSHOP TYPE EFFECTS — VISUAL ENCYCLOPEDIA 


Price £34.99 Author Roger Pring Publisher New Riders 


rom the very first page, this book is 
} F visually stunning. Presented in 

large format full-colour throughout, this 
is the ultimate type resource for 
Photoshop users. It offers practical 
information as well as mountains of 
material to fuel your imagination. 

Divided into two general sections, the 
book begins with an overview of the 
language of type and how this is 
manipulated within the Photoshop 
environment. You then move on to the 
heart of the book, which is the step-by- 
step tutorials that illustrate how to 
achieve each effect with ease. With an 


ISBN 0-735-71190-9 


appendix that illustrates 187 basic filter 
effects, and what can be achieved with 
third-party software, this is as 
comprehensive a type manual as you are 
ever likely to see. 

Take this encyclopedia as your 
inspiration, but also as just a beginning. 
From these diverse type effects, more 
can be created with some simple 
manipulation of the effects parameters. 
If you buy just one book on Photoshop 
type effects, make it this one. 


VERDICT 
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ABOUT FACE — REVIVING THE RULES OF TYPOGRAPHY 


Price £29.95 Author David Jury Publisher RotoVision ISBN 2-88046-677-6 


y n today’s graphics industry, it 

seems that every design rule is 
there to be broken. None more so than in 
the use of type. However, what this book 
comprehensively illustrates is that the 
rules that have developed over centuries 
are there for a reason. They can be 
broken, but a thorough understanding of 
how these rules affect type is essential 
to good design. 

Over 13 chapters, typography is 
dissected so that the reader can then see 
first-hand how readability and legibility 
are very different. How the manipulation 
of space and the use of paper and print 
finishing impact on the final design. 


As this book points out, “Rules 
improve legibility, strengthen 
communication and make words more 
potent. Rules that provide the designer 
with invaluable knowledge about the 
craft of communication.” With 
programs like Photoshop enabling 
you to change every aspect of a font’s 
design, taking some time to learn the 
basic rules of this art will ultimately 
ensure that your typographic inspiration 
will, above everything else, 
communicate your message. 
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STOP STEALING SHEEP & FIND 
OUT HOW TYPE WORKS ano evimtion 


Price £22.99 


Author Erik Spiekermann & E.M. Ginger 


Publisher Adobe Press 
ISBN 0-201-70339-4 


NI ow inits second edition, this slim 
and unassuming book is a 
powerhouse of insight into type design 
and usage. Page after page of clear and 
concise explanation moves you from an 
overview of what type is and how it’s 
used, to more in-depth discussions of 
how to choose just the right face for 
your project. 

Technical explanations are kept to a 
minimum, with illustration used on each 
and every page to make the authors’ 
points and show clear examples of the 
technique under discussion. This book 


is itself a masterclass in type design. 

Type examples are also shown 
throughout the book, which adds to its 
usefulness as a type specification guide. 
But this book is much more than that. 
Your own understanding of how type can 
be used will take a quantum leap after 
reading this book. As the authors point 
out, type “...can walk, run, skip, jump, 
climb and dance”. Read this book and 
you'll soon find out why and how. 
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EDWARD FELLA: LETTERS ON 


AM ERI CA PHOTOGRAPHS AND LETTERING 


Price £25 


Author Essays by Lewis Blackwell & Lorraine Wild 


Publisher Lawrence King 
ISBN 1-85669-182-9 


}, S| ome books are all pictures and no 

type, others are all type and no 
pictures; but there are few that are all 
pictures of type. Edward Fella: Letters on 
America is just that. 

If you were ever in any doubt that 
America is the land of pointless signs 
then this is the book to convince you 
otherwise. Fella has systematically 
photographed lettering, typography and 
signage that ooze American style. 

Take the flaking Ford sign, or the 
McDonald’s illuminated sign that has 
its front ripped away to reveal the 


florescent tubes beneath. Or maybe the 
faux Wild West restaurant menu with its 
‘The Good, the Bad, and the Ugly’ style 
typeface — they’re all in there. 

And when you finally finish flicking 
through its structurally identical pages, 
you're left with a sense that you too have 
travelled the length and breadth of 
America photographing the typography 
that makes up the American print style. 
This is a great book for ideas. 


VERDICT 5/5 
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TYPOGRAPHICA 


Price £25 Author Rick Poynor 


hen it comes to typography, there 

are a few magazines and 
publications that stand out from the 
crowd. The obvious one is RayGun, the 
much-hyped and over-quoted magazine 
designed by David Carson. Maybe not 
quite so well-known is Typographica. 

Founded and edited by renowned 

British typographer Herbert Spencer, 
Typographica was one of the most 
original visual arts publications of the 
post-war period. 


This book looks at the typographic 
style behind the periodical and 
investigates how it’s relevant to today’s 
typographers. 

It's a visually interesting book, with 
commentary on the main style that 
Typographica presents. However, the 
look of the book could have made more 
of this clearly innovative style. 


VERDICT 
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A TYPE PRIMER 


Price £17.95 

Author John Kane 
Publisher Lawrence King 
ISBN 1-85669-291-4 


lot of hot air is spouted about 

typography. Some designers are 
obsessed with the good use of 
typography and are extremely picky 
when it comes to mistakes made, or 
rules broken. 

Yet the rules of typography are 
sometimes difficult to come by. What are 
the rules? Do | need to know them before 
| can break them? What's the ‘right’ way 
to use type in print design? 


TYPE & TYPOGRAPHY 


Price £19.95 
Author Phil Baines & Andrew Haslam 
Publisher Lawrence King 
ISBN 1-85669-244-2 
This book answers all these questions his book is packed full of For instance, there’s a comparison 
and more. So if you want to be totally i information on type and between the type used on the London 


correct in your use of typography then 
you need to read it. It analyses the basic 
principles and applications of type: from 
measuring type, classifying typefaces 
and organising text on a page, to when 
and how to kern typefaces. 


typography. It’s so full, in fact, that it’s 
a bit difficult to navigate at first and 
the sheer amount of information is a 
little overwhelming. 

But once you delve in, you'll find the 
kind of information that'll make you stop 
and read. Rather than just a bunch of 
hard and fast type rules, the authors look 
at working examples of good typography. 


Underground map (Harry Beck, 1933) to 
that of the New York subway map. 

The authors tell you exactly what 
makes good type use and what doesn't; 
what works and what doesn't. There is 
also a chapter on communication theory. 
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TYPE1 DIGITAL TYPEFACE DESIGN 


Price £25 Author Nathan Gale 
ype Tis really a reference book. It 

i lists type foundry after type 
foundry giving a visual reference of the 
sorts of fonts on offer from that 

particular designer. 

For each foundry you're given an 
image of the font (A-Z), a sentence 
written with that particular font (“the 
quick brown fox” and so on) and an 
enlarged image of two of the glyphs. 


The layout of the book is very 
formulaic and a tad tedious as you get 


Publisher Lawrence King ISBN 1-85669-270-1 


towards the end. As we've said, it’s a 
reference book: one that’s ideal to have 
sitting on your desk while you work. But 
if you’re looking for inspiration for new 
font designs, ora nice coffee-table 
book, this isn't it. 

The CD contains 178 font, which are 
free for non-commercial use. Shame 
they didn't have as many as us! 
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the Brief 


To create a marketing campaign, spanning print, web and film media, to 
promote a new film by fictitious film-making company Crunch Films 


LUMNS 


the imaginary independent film company 


The rules of good typography don't merely refer to print 
projects. On the contrary; with the expanding number of 
digital fonts out there more and more designers are using 
obscure fonts, in Web projects and in moving imagery. 

This is why we decided to include those three areas — 
print, Web and moving image — in our typography ‘mega’ 
project this month. 

Take one made-up company, Crunch Films; an 
independent film company that is poised to Launch its new 
documentary short film. Add one typeface, Dstruktonaut, 
created specifically for this project by Pixelsurgeon, and 
ask three designers to use it within marketing campaigns 
for print, Web and motion. 


For print: We asked award-winning magazine designer, 
Richard Llewellyn, to design a typographic poster campaign 
for Crunch Films, using Photoshop. 


For Web: Design collective BD4D creates an animated 
Website intro in Flash, and shows you how to animate type 
with ease. 


For film: Our moving type tutorial shows how to create a 30- 
second promo for Crunch Films, using After Effects. Chris 
James Hewitt, co-author of After Effects Most Wanted shows 
you how. 


Turn the page to see the results... 
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meanwhile back at the 


Create your 
own typeface © 


FontLab is a font creation and editing tool 
that provides all the power you need to build 
a new typeface from scratch... 


here are thousands of 
typefaces in existence, 
but sometimes a designer 

{ still can't find what he or she 
is looking for and instead cracks open a 
type design application to crank out 
a new font. 

Creating typefaces isn't easy, and 
designers have been hampered by a lack 
of modern software. The industry 
standard, Macromedia Fontographer, 
hasn't been upgraded since 1996, and 
many designers have discovered that by 
upgrading their operating systems to 
Windows 2000, ME, XP or Macintosh 
OS X, Fontographer finally shows its age 
and stops working correctly, if at all. 


Although Macromedia has gamely 
posted a couple of workarounds on its 
site, many designers will be looking 
around for a new application to replace 
its ageing copy of Fontographer, and 
alternatives are thin on the ground. The 
only real option for the serious type 
designer is FontLab, which has been 
attempting to wrestle the type creation 
crown from Fontographer for the last 
few years. Because FontLab has an 
active development cycle, it works 
perfectly ina modern Windows 
environment. Additionally, support for 
Macintosh OS X has recently been 
announced, which also brings a degree 
of parity to the two platforms. > 
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If you’ve experimented with 
Fontographer previously, FontLab’s 
interface will seem immediately 
familiar to you: opening an existing 
font or selecting New from the File 
menu brings up a character grid 
containing cells for all the glyphs in the 
chosen character set, including 
punctuation, accents and special 
characters. Double-clicking on a cell 


opens up a new glyph-editing mini 
window where character outlines can 
be created or modified using FontLab’s 
vector paint tools. 

Kerning allows you to create 
tighter built-in relationships between 
pairs of glyphs, such as To and Ve, 
which can improve the appearance of 
the typeface. Metrics are simply the 
defined border widths for each 


character, and FontLab has a combined 
Metrics and Kerning window, allowing 
you to toggle between these two 
attributes in order to make fine 
adjustments to your font. 

Usefully, FontLab also includes a 
Preview window so you can see the 
effect your changes to the character 
shape, metrics or kerning are having on 
a string of text. That kind of live 


feedback on the colour and appearance 
of your font is invaluable. 

FontLab is a densely featured 
application and it would be fairto say 
that the learning curve is steep. 
Explaining all of its features is probably 
beyond the capacity of a single tutorial, 
but if you’re switching from 
Fontographer or are new to type design, 
you should learn enough to get started. 


Top 10 FontLab Tips 


you. American type designer Ed Fella was inspired 

by the naive, handwritten signs that dotted America 
in the late twentieth century. House Industries takes its 
inspiration from cheesy early 60s culture, while T-26 
was inspired by the broken-up text from a fax machine 
to create its Digital Decay font. 


1 Inspiration for typefaces can come from all around 


how many typefaces are considered modern, but 

were in fact designed over a hundred years ago. 
Franklin Gothic, a mainstay of many magazines and 
annual reports, was actually designed in 1902 by the 
talented typographer Morris Fuller Benton. 


2 Read the history of type design. It’s surprising 


letters. A good way to get started is to create a pi 

font, or picture font, which could contain simple 
streamlined images. Perhaps if you use a lot of logos in 
your work, you could build a typeface containing them 
in order to keep your logos in one handy place. 


3 Typefaces don't have to be based on Roman 


mathematical lines and curves, so unless your 
font is going to be made up of straight lines, you'll 
need to understand how to build characters using the 


fl Get used to Bézier curves. Fonts are based on 


fewest control points possible. /llustrator, FreeHand, 
CorelDRAW and FontLab all share the same basic 
method of creating curved paths by clicking and 
dragging with the Pen tool and is easy once you get 
used to it. 


typeface designs without the express permission 

of the copyright holder. While all font editors 
allow you to open up existing fonts, you should not use 
these as the basis for your own designs. As wellas being 
illegal, it’s just bad Karma. 


5 Respect designers’ copyright. Don't copy existing 


your typefaces directly on the computer 

screen, it’s often a good idea to start witha 
pencil and some paper. Ideas can be expressed quickly 
and the end results can be scanned in and traced in 
a vector application or used as a template in FontLab 
or Fontographer. 


by Although there's nothing wrong with designing 


attention to detail. The process can be a laborious 

one, so if patience isn't your particular virtue, you 
might be better off with a different creative discipline, 
such as fire breathing or chainsaw juggling. 


7 Creating typefaces requires perseverance and 


Typeface design is subject to the same whims of 

fashion that influence other areas of design. In the 
past we've seen grunge type, hybrid fonts (for example, 
where Futura and Bodoni are mashed together to create 
Max Kisman's FF Fudoni) and pixel fonts. 


8 Be aware of the current typographic zeitgeist. 


old chestnut. Try not to use all the fonts in your 

collection on one page, as the results are 
generally not as impressive as you might imagine. It’s 
usually best to use one typeface for headlines and 
another for the body copy. Try to avoid using display 
fonts for your body copy as this is often difficult to read. 


It’s true you can build a typeface using nothing 
1 0) but FontLab, but involving other applications 

can make your life easier. You might prefer to 
use Adobe /llustrator, Macromedia FreeHand or 
CorelDRAW to design your fonts and then import them 
into a font editor — most font editors will allow you to 
import EPS files or even paste vectors into empty cells. 
Photoshop is great for tidying up scans or applying 
filters to your designs, and Adobe Streamline is a handy 
application to have in your armoury for converting your 
scanned images into vectors. 


a Know the rules before you break them. Yes, that 
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FontLab 4.5 has a new properties area in the Metrics window. It also 
has new Metrics, Kerning and Preview dialog boxes. 


READ OUR OTHER 
Lerrersenies ArticLes 
Letter A 


The Letter L 


By Allan Haley 


Select «letter to 
view purchase font 


3 
thet became: letter we know 
today. When the Phoenicians developed their alphabet around 1000 B.C.,the ‘et 


It helps to be familiar with the history and the rules of typography 
before embarking on the creation of your own font. 
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You can design your typeface directly on your computer screen, but 
we'd recommend at least doing a bit of planning on paper beforehand. 


Part 1: Designing your typeface 


Use good old-fashioned pen and paper to sketch out your ideas, then refine 
them using the cutting edge vector manipulation of Adobe ///ustrator... 


Something simpler 


If you're interested in designing 
typefaces but FontLabseems a 
little too much for you, take a 
look at FontLab’s Type tool, which 
is a simple and easy-to-use font 
editor. You can create TrueType 
and PostScript Type 1 fonts and 
even add custom characters and 
dingbats to existing typefaces. 
Admittedly more of a hobbyist's 
tool, it's a great introduction to 
the world of type design. 


The hardest part of creating a new font is 

oO coming up with a fresh idea that will work 2 
consistently across all the characters in an alphabet. 
Sketching a few ideas on paper can save you time 
later and will give you some immediate visual 
feedback on how your idea might work. In this case, 
we're going to use a simple lowercase ‘a’ as our 
starting point and extrapolate a typeface from that. 


Scan in your sketches (or use sketch.tif from the 
CD) and import into ///ustrator (File>Place...). 
On a new layer, create a white square using the 
Rectangle tool and set the Transparency to 50 per 
cent using the Transparency palette. Create a third 
layer and use the Rectangle tool with a stroke and no 
fill to establish the character's general proportions. 
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Experiment with different interpretations of 
your design until you find the best shape. It’s 
easy to see how you can quickly and easily create 
new characters (or glyphs) by removing, rotating 
and flipping the component parts. In this case, 
we've created a lowercase ‘r' from the outer curve 


Use the Round Corners filter again to curve 
the bowl. You'll need to use a smaller radius 
than the larger outer shape or the curve will look 


slightly odd. of the lowercase ‘a’. 
ee - 
Not all characters can be created from the When creating glyphs for a new typeface, 


simple parts already created, so don't be afraid 
to create new glyphs in the same style as the 
lowercase ‘a’. These new characters can be flipped 
and rotated as well using the Rotate and Reflect 
tools from the toolbar. 


there will be times when you're faced with 
multiple, equally acceptable solutions to certain 
characters. In this situation, choose the character 
that suits the typeface as a whole, rather than 
decide on the character in isolation. 


Use //lustrator’s built-in Round Corners filter 

(Filter>Round Corners) to create a generic ‘o' 
shape that will be used to create many of the curved 
lines needed for the typeface. Make a copy of the 
generic ‘o' and keep this on one side. To create the 
‘a’ character, slice up the original with the Knife tool 
and use the Pen tool to add the a's bowl. 


G By adding simple elements to the basic shapes 
already present, new glyphs can be built. With 
the Pen tool draw a straight vertical line (hold down 
the Shift key to constrain the angle). Use the Direct 
Selection Arrow (white arrow) to Shift-select the top 
control points on the bowl of the ‘a’ and drag 
vertically (again holding down the Shift key to 
constrain the direction). Create a lowercase ‘d’ by 
combining the elongated bowl with the vertical line. 


Once you're happy with your complete 
9 | alphabet, you'll need to expand the strokes to 
outlines (Object>Path>Outline Stroke) and remove 
overlaps by Option-clicking Add to shape area from 
the Pathfinder palette. This is an important step 
otherwise your fonts won't look as expected when 
imported into FontLab. > 
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Part 2: First steps in FontLab 


There are a few steps to go through before you can start playing around 
with your typeface: setting your preferences and importing your vectors... 


Transformers: 
filters in disguise 


One of FontLab's coolest features 
is its ability to apply 
transformations and filters to 
some orall the characters ina 
font (Tools>Transform), This is 
invaluable for creating italic and 
bold versions of yourtypefaces, 
cleaning up vector paths or 
creating funky effects such as 
drop shadows, 3D extrusions and 
envelope effects. 


G On opening FontLab and selecting New from 
the File menu, you're presented with a cell 
matrix containing all the possible glyphs from the 
particular character set you've chosen. The default 
character set is fine for our purposes, but if you had 
a year or so to burn, FontLab supports double-byte 
character sets such as Japanese, Chinese and 
Korean. In fact, FontLab supports any Unicode 
character set, which is handy. 
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a There's a bunch of info about your typeface 
that FontLab would like, and it's best to get 
this out of the way now. Select Font Info... from the 
File menu and the first section is simple enough: 
deciding what to call your font. Keep an eye out for 
the little emerald icon — clicking on that will 
automatically fill in some fields for you, which can 
be a great timesaver. 


4 | A Windows-only feature is deciding what 
privileges to allow the user of your typeface. 
You can allow them to do what they like with the 
font or be as draconian as allowing them only to 
view and print documents created using your font. 


To get your design into FontLab, you need to 
save off each glyph as an individual EPS. Save 
as a version 7 EPS (or earlier) because FontLab, like 
Fontographer, can be thrown by the additional 
information contained in later EPS versions. There's 
no need to save an instance of each accented 
character, such as 4 and é. Just the accents 
themselves will do as these can be married to the 
appropriate glyph in FontLab (as you'll see later). 


Even if your plan is to give your font away, it's 
usually a good idea to establish what the 
licence agreement should be, even if it's as simple as 
forbidding the end user to re-sell the font or include 
it in a type collection. You can include a link toa 

more in-depth licence agreement. 


8 | Back in FontLab: double-click a cell to open 
that cell's Glyph window. This is where the 
individual characters and symbols are imported, 
created and edited. In the background is a rough 
bitmap representation of the glyph. The various 
horizontal lines include the baseline, the cap height, 
the x height and where the descenders end (for 
example, the tail on a lowercase ‘p'). The font's 
width is also represented vertically. All these settings 
can be adjusted in the Font Info window. 


3 | It's hugely important to assert your copyright 
over any original designs you may do, and 
typefaces are no exception. From the Copyright 
information menu in the Font Info window, fill in the 
appropriate information. Remember: don't copy 
anyone else's designs! 


G Many of the Font Info settings are beyond the 
scope of this tutorial. In most cases, it’s fine to 
accept the default setting or use the little emerald 
icon to automatically fill in fields. FontLab has a 
thorough manual that explains the settings in 
greater detail, and we'd recommend taking the time 
to read through it. 


9 | Select Glyph>Import from EPS... to import your 


EPS into the Glyph window. The co-ordinates 
for the control points and various other visual data 
can be tured off by deselecting the various options 
in the View>Show Layers menu. 


Part 3: Taking things further 


The real work starts here: using backgrounds, components, and 
automatically adjusting your typeface’s metrics and kerning... 


TrueType or 
PostScript 


TrueType and PostScript 
describe the two main font 
formats for the Mac and PC 
platform. TrueType was invented 
by Apple because Adobe initially 
didn't want to share its PostScript 
technology and, perversely, when 
Adobe relented and started 
giving away its technology, 
TrueType became the standard 
format for fonts on the Windows 
platform. Although TrueType 
requires just a single file (unlike 
PostScript, which needs both a 
screen and printer font file to 
work) type purists prefer 
PostScript fonts. TrueType works 
fine in a word processing context 
but doesn't provide consistent 
results in a professional printing 
environment and has been 
known on occasion to clog up 
imagesetters. 


i] Should you be so inclined, you can sidestep 
Illustrator and import your scans directly into 
FontLab for tracing by hand. It's a good idea to use 
Photoshop to improve the contrast, clean up any 
distracting smudges and to straighten the baseline if 
the type was scanned at a slight angle. FontLab only 
accepts 1 bit TIFFs or PICTs, so convert your 
graphics to bitmap (Image>Mode). If you're in RGB 
or CMYK mode, you'll need to step down to 
greyscale before you can convert to bitmap. 
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4 | You can now use the Pen tool from the 
toolbox at the top of the window to trace 
around the bitmap. FontLab uses Bézier curves (like 
Illustrator, FreeHand and CorelDRAW) to draw the 
path, so if you're familiar with those applications, 
you should have no problems. Choose FontAudit 
from the View>Show Layers>FontAudit menu to 
alert you to mistakes in your drawing. 


Peproecri Tere Titty 


Now is a good time to check the Preview pane, 

which shows live updates of your font's 
progress. So far so good, but the widths of the 
characters and their relationships to each other 
seem slightly out of kilter. In the example above, the 
space on either side of the ‘f' glyph looks too wide, 
which could be solved with some adjustments to the 
font's kerning and metrics. 


| Copy Background = CRY. 
Trace Background 


Remove Background “CwR 


| 


Imported bitmaps are called Backgrounds and 
are placed in the Glyph window by copy and 
pasting from Photoshop or other image editors. 
Alternatively, they can be placed by choosing 
Tools>Templates>Open Background. To see your 
Background bitmap, you'll need to make sure that 
Templates are visible in the Layers floating palette. 


i 


Hints 


The imported bitmap can be positioned and 
scaled after clicking on the bitmap B icon in the 
Tool palette fixed to the left of the screen. Once 
you're happy with the Background's size and 
Position, click the Bitmap OK button that appears. 


As mentioned previously, you only need to 

import or draw one instance of an accent, such 
as an acute, umlaut or circumflex. Two or more 
Component glyphs can be married in a cell and if the 
source glyph is modified, the appearance is updated 
in all the Component instances of that glyph. 


G To create an ‘a’ glyph, you can combine two 
glyphs as Components to create a new glyph. 
To begin with, you need the ‘a’ Component, so from 
the Glyph menu choose Add Component and type 
‘a’ in the Name begins... field at the top. With the 
‘a’ glyph highlighted click OK. Repeat the process, 
type ‘acute’ in the field and press OK again. The 
result is a perfectly rendered ‘a’ character. 
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Metrics, put simply, is control of the white 

space surrounding a character and defines the 
width a glyph occupies. FontLab has an option to 
analyse the font using an internal algorithm and 
apply metrics automatically. It makes quite a decent 
stab at it (Window>New Metrics Window>click the 
emerald icon), although hand-adjusted Metrics 
usually provide better results. 


‘You want to generate kerning for { Ail aairs in the current s. 3 
rors se Sard} 
How much white space do you want fo leave between glyphs? 
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Minimum absolute valve for generated kerning: 


See 


Similarly, FontLab can automatically generate 

kerning pairs. Kerning is finely adjusting the 
distance between two glyphs so they are more 
harmonious and visually pleasing. There is great skill 
in successfully kerning a font, but FontLab, as with 
the Metrics, has an automatic option (in the 
Preview/Metrics window click the K button and then 
click the emerald icon). Again, manual kerning often 
produces a more professional set of kerning pairs. > 
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Part 4: A yearning for kerning 


Although automatic kerning will produce an acceptable font, the best results 
come from manually kerning your typeface... 


OpenType 
advanced features 


Opentype is a new font format 
developed by Adobe and 
Microsoft and has two main 
benefits: it's completely cross 
platform, so the same file can be 
used on both Macintosh and 
Windows computers, and it has 
increased typographic control 
and character sets. Although 
Macintosh OS X's ability to use 
Windows fonts takes some of the 
edge off the first benefit, the 
advanced typographic features 
make it an exciting prospect. 
More details can be found at 

[w] www.adobe.com/type/ 
opentype/main.html 


You can see the results of the automatic 

kerning and metrics in the Preview/Metrics 
window. The rows of figures at the top show the 
overall width, left sidebearing, right sidebearing and 
the blue strip shows the kerning value between the 
pairs of characters on screen. Things have improved, 
but the kerning for the troublesome ‘f' could use 
some fine-tuning. 


4 | Create a new Class by clicking the new 
document icon again. From the glyph matrix 
drag all instances of glyphs that share characteristics 
of a lowercase '‘c' as we'll be adjusting the 
relationship between 'f' and ‘c’ (and similar) pairs. 
Name and save the Class. 


‘Buse Unicode indenes us & base for TrueType encoding 
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@ To save a Macintosh PostScript version of your 
font (the preferred format for Macs) select 
File>Generate Mac Suitcase... You will see a named 
suitcase that contains your font. Clicking the options 
button allows you a few export choices. The default 
choices can be kept. Although you don't strictly 
need PFM or AFM files, they are a good idea to 
include with your font. 
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Rather than manually adjusting every 
combination of the ‘f' glyph and ‘e’ (and 
glyphs that look similar to ‘e'), we can create groups 

of glyphs whose kerning values can be shared. 
FontLab calls these groups Classes. To create these, 
first of all open the Classes window 
(Window>Collection/Classes Panel). 


— 


a Using the OpenType Kerning Assistance 
window (Tools>Kerning Assistance...) decide 
which classes are Left Classes and which are Right 
Classes. Click Save. 


wld labelotate ts 


8 | To save a PC TrueType font (the preferred 
format for the Windows platform) select 
File>Generate Font... making sure you select PC 
TrueType from the Format menu. Accept the default 
options and click Save. 


Click the new document icon and drag 
instances of the ‘f' character into the top pane. 
The main glyph should be identified with a single 
quote after the glyph name in the lower pane (this 
turns the glyph icon blue in the top pane). In the 
lower pane, the Class should be named beginning 
with an underscore. Click the green tick button to 
apply your changes and save the Class. 
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Back in the metrics window, type in the main 
G identifier glyphs, then press the K to make sure 
you're adjusting the kerning, not the metrics. You'll 
notice that there are now little arrows below the 
glyphs; these allow you to select which class you 
want in the situation where a single glyph may be 
included in different classes. 


urgeon 


@ Test your new typeface by dropping it in your 
Home\Library\Fonts folder in OSX — there's 
nothing quite like having your new creation appear in 
the font menu. You'll probably still need to tweak 
various elements of your typeface. There are also 
many more areas of FontLab that can be explored, so 
you can always go back and experiment. 


ene Regular@123 
Scene Regular Alternative@123 

Scene Regular Italic@123 

Scene Regular Italic Alternative@123 

Scene Medium@123 

Scene Medium Alternative@123 

Scene Medium Italic@123 

Scene Medium Italic Alternative@123 

Scene Bold@123 

Scene Bold Alternative@123 

Scene Bold Italic@123 

Scene Bold Italic Alternative@123 

Scene Black@123 

Scene Black Alternative@123 

Scene Black Italic@123 

Scene Black Italic Alternative@123 

Scene Ultra Black@123 

Scene Ultra Black Alternative@123 
Scene Ultra Black Italic@123 

Scene Ultra Black Italic Alternative@123 


Win [FontLab & Scene font family] 


Enter our competition and you could win a copy of FontLab and Agfa Monotype’s latest font 


eve teamed up with Agfa Monotype and 
Pyrys to offer you the chance to win a copy 
of FontLab, font design software, plus 

i! Agfa’s latest Scene font family. The runner 
up will get a copy of FontLab. 


Scene Font family 
Designed by Sebastian Lester, the Scene family is the 
latest addition to the Agfa Monotype font range. 
Lester began his career after graduating with honours 
from Central Saint Martins College of Art and Design 
in London. The first part of his career was spent 
designing for the music and games industries, 
dabbling in 3D animation and designing type for the 
likes of T-26 and Garage Fonts. Then, in 2000, Lester 
joined Agfa Monotype, where he now creates fonts for 
both on-screen and print uses. I've always had a deep 
interest in type and typography, says Lester, but when | 
began creating text typefaces for Agfa Monotype, | 
gained new insight into the subtleties of letterform 
design. For more information go to www.fonts.com 

At Agfa Monotype, he has been part of the team 
developing fonts for a wide range of clients including 
Waitrose, BG Bank Denmark and Opel. Scene is 
Lester’s first commercial typeface family created for 
the Monotype Classics Typeface Library. 


Fontlab 


Fontlab 4 is a digital editing tool that gives graphic 
designers access to the power of the OpenType font 
format for the first time, including ligatures, small 
caps, alternative characters and other OpenType 
features . Users will now be able to create fonts that 
can automatically substitute fractions, swash caps, 
superscripts and subscripts. 

Fontlab includes a new macro language scripting 
capability that allows the user to write macros in the 
popular Python scripting language. FontLab users can 
create their own plugins and tools. This opens the door 
to vast time savings as users will be able to write 
simple scripts to perform tasks which previously 
required tedious character by character modifications. 
www.fontlab.com for more details 


Question 
Who is said to have designed the Euro symbol (p62)? 


To enter 


The easiest way to register your entry is via our 


Website at [w] www.computerarts.co.uk/competitions. 


Or you can click the Competition tag on the Contents 
screen of our cover CD, then enter Type as the 
competition name, and fill in the rest of the form. Click 


Submit Entry. If you don't have Web access, you can 
send your answer on a postcard, along with your 
address and a contact number to: Type Competition, 
Computer Arts Special, 30 Monmouth Street, Bath, 
BAI 2BW. 


The rules 

The competition closing date is 5 December 2002. 
Employees of Monotype, Pyrus or Future Publishing, 
or any of their agents or families, may not enter. 
Multiple entries will not be accepted. The editor's 
decision is final. There are no cash alternatives. No 
other correspondence will be entered into. If you are 
entering by post and do not wish any of the companies 
involved in this competition to contact you with 
further offers, indicate this on your entry. We won't 
pass details on to third parties. 


Previous winners 

Issue 35 — Get Started in Digital Art: Anthony Martin 
from Wigtownshire, Ellen Stafford from Bath, Annette 
Fincher from Texas, USA, John Donnelly of New Jersey, 
USA, and lan Yule from Reading. 

Issue 36 — Studio MX winner - Diana John from 
Nottingham Flash MX winners - Edward De Rueda, 
Castaic, California; James Rutkowski, Columbus, Ohio 
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32 Tutorial The hidden depths of type 


The hidden 


depths of type 


We create a film poster in Photoshop, and 
show you how typography can be used to 
express feelings and emotions, and to 
visually stimulate your audience... 


. ypography has always been 
( an important way of 
presenting information, 

\ and it can be used in many 
ways. There are ongoing arguments 
about whether type should be legible, 
but it really depends on what you're 
trying to achieve. If you're designing a 
book to be read then it’s important that 
it's readable, but type can also be 
used as purely visual imagery. 

Film posters have always beena 
good medium for showing how 
typographic design can be used to give 
a feel of a film, as demonstrated by 
early posters such as the one for The 


Man With The Golden Arm designed by 
Saul Bass. Modern-day rolling credits 
also show how effective type can be — 
for example, Kyle Cooper's credits on 
the film Seven and, more recently, his 
rolling credits for Arlington Road and 
Mimic demonstrate how the disturbed 
use of typography creates an 
emotional reaction. 

This tutorial shows you all you need 
to know to manipulate type, and to use 
it as a means of expression, as well as 
a language. Manipulated type can 
create an atmosphere, and give you 
an immediate visual insight into 
the content of the film. > 
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Tutorial The hidden depths of type 


Part 1: Starting with embossed type 


To begin, you're going to create the background and focal points 
that will act as a base for the type work later on... 


it Open background. jpg from the cover CD then 
go to Image>Adjust>Hue/ Saturation 


(Crtl+Command U). Use this to adjust the colour of Move and scale the brain image until it's:in 3] Open gun. jpg, cut it out, then scale, drag and 
the background. Once you're happy with the position. The brain should be a subtle rotate it into position. The gun should be 
results, press OK. Open brain.tif and place it over background image, so change the layer option to pointed at the centre of the brain. Choose Lighten 
the background Hard Light and adjust the Opacity to around 40% from the Layers Options and adjust the Opacity. 


Color Necker 


Select background 


[only Web colors 


5 | Now duplicate the Background layer, and bring 


Open doublehand. jpg, scale it down and rotate it to the foreground slightly offset. Reduce the 


it using the creases as a visual impact of a bullet | Opacity to about 20 per cent, and change the You need to make the background image 
over the centre of the brain. Then change the Layers Layers Options to Soft Light. This should bring stronger still, so produce another layer and fill 
Options to Soft Light, the Opacity to 55, then move colour back into the image, and strengthen the this with a purple colour. Move the Layers Options 
the Gun layer to the top of the Layers list: imagery when we add more layers later. to Overlay, and adjust the Opacity to 40 per cent. 


Cancel 


Preview 


Open zip.jpg from the cover CD. You need to 


place the zip over the image, so drag the Now go to Filter>Stylise>Emboss. Photoshop 


image onto the document in a new layer. Then 8 | Next, add a word to the zip to give it some will ask you if you wish to rasterise the text, so 
rotate the zip (Ctrl+Command T) until it's in the depth. Go to the Text tool and type the word click OK. Use this to create a nice embossed effect 
desired position. Place it diagonally, so that the eye LOVE, at a suitable size, and scale and tilt it until it's to the type. Now add some Gaussian Blur to help 


is drawn to the opening of the zip at the correct angle merge the shadows and highlights. 


7 Sampled Colors = 


Fuzziness: 


@ Setection O image 


——— 


10 Now make a selection of the LOVE layer and - Lt 
go back to the Zip layer. Now copy and paste a ie Go to Select>Colour Range and select the 12 | Open eye. jpg and place it under the opening in 

new layer above the LOVE layer. Change the Layers black around the zip. Adjust the Fuzziness until the zip. Now create a layer mask, turn off all 

Options to Multiply and 80 per cent Opacity. Now enough of the black has been selected. Press Delete the other layers apart from the Zip for more clarity, 

adjust the Hue and Saturation of the LOVE layer This doesn't have to be perfect (a rough feelis fine), and, using a Paintbrush, mask out everything 

until it matches the dark areas of the zip but it may need to be tidied with the Eraser tool outside the opening. 


{Hue Saturation 


Edit;(Master ss 
titted? 


Hue: " RAN 


Saturation: 


14 Create a new layer so that you can doa drop 
shadow around the zip. Use the Airbrush to 
run two lines along the opening of the zip, then add 


Now adjust the colour of the Eye layer, Gaussian Blur of around 20-30. Bring the Opacity You've got a background that forms the basis 

making it redder to give more impact and back to around 70 per cent and change the Layers G of the poster; now it's time to add some text to 
emotion. Make the Hue a little redder and also Options to Multiply. Now make a selection of the create more emotion for the film. You'll learn some 
increase the Saturation eye mask and create a mask on the Shadow layer useful Photoshop tricks for using type 


TL 


Part 2: Stitching type into fabric 


We show you how easy it is to sew in Photoshop... 


SSL NA A EY 


o Now create a selection from the HATE layer 

and make a new channel from this selection. 

LOVE on the zip? Start by typing out the word Choose a bold sans serif font as it'll work best Create a new layer and go to Edit>Stroke to puta 
Pp y typing G 


G How about adding a word to counteract the 


you wish to be stitched onto the background for the particular effect you're creating. Rotate small outline around the lettering. Hide the HATE 
material. We've decided to use the word HATE. it and move it to a position you're happy with. layer to see the results. 
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Now for the first inner stitch line. Make a 

selection from the channel you've just 
produced and go to Select>Modify>Contract and 
contract the selection until it's inside the first outline 
Create a new layer and go to Stroke again and put a 
thinner line on this selection 


Do the same as in the previous step for the 
outer line of stitching. This time go to 
Select>Modify>Expand (instead of Contract) and 

then onto Stroke 


Create a new layer and make a selection 

from the two stitching layers. Now expand 
the selection and fill it with black. Then 
Filter>Blur>Gaussian Blur the black. Then change 
the Layers Options to Colour Dodge and set the 
Opacity to 40 per cent. Move the layer behind the 
stitching. You'll find this creates a soft shadow 
behind the stitching 


8 | Now Blur the three outline layers to soften the 
edges. Select the first outline we produced and 
go to Filter>Stylise>Emboss. Create a small (Height 
4 pixels) but very embossed effect on the outline 
This will give the effect of the line being raised from 
the background. 


(cancet 


Saturation: 


(oad 
(Save 


Lightness: 


Make the last layer Hard Light and about 50 

per cent Opacity. Then select the middle 
outline and go to Image>Adjust>Hue/ Saturation 
(Ctrl+Command U). Click on Colourise and Lighten, 
add more Saturation and adjust the Hue until it's a 
lighter shade of the background 


Merge the two stitching layers and Hue and 

Saturate them as in the last step. Then change 
the Layers Options of the two layers to Screen with 
about 80 per cent Opacity. This should help to blend 
it into the background slightly 


Part 2: Stitching type into fabric continued... 


G Now you need to create the stitch marks on 
the two layers you've just produced. Make a 
mask on both layers and use the Paintbrush tool to 
mask out equal lengths of stitching (this doesn't 
have to be perfect). 


9 | Merge the two stitching layers and duplicate 
the layer. With the top layer selected, go to 
Emboss and do the same as the previous step, but 
this time you want the angle of light to go in the 
opposite direction. This will give the impression that 
the stitching is embossed into the background. 


Brightness: 


Ee) 
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Contrast: 


12 | It's still standing out too much. Go to 
Brightness and Contrast and adjust the light 
areas until you're happy that it’s become part of the 
image. If you like, you could now add more stitching 
elsewhere, although we thought that might be 
overdoing the effect. 


Part 3: Adding emotion with typography 


You can now use type to add texture and meaning to your image... 


1 | Now that the main image is complete, you 
can start adding the rest of the text. What 
we're after is a grunge, uncoordinated look 
Choosing the right fonts for the job is very 
important. Handwritten and distressed fonts are 
most effective here 


4 | At this stage, we've added about six layers, 
but you can continue to add more at 90 
and 270 degrees. This helps to block out more of 
the background. 


Now this corner of your poster is almost 
complete, but it's overpowering the image 


below. We need to soften the effect. Use Overlay in 
the Layers Options on all the text layers except the 
text line in the centre, which you want to stand out 


Taking parts of the script from our imaginary 

film, we start adding layers of text. White text 
is a powerful tool on dark backgrounds, knock-out 
giving a pureness to the lettering. Start adding a few 
lines of text around the top left corner. 


5 | Add more layers on the diagonal. Try not to 
completely block out the background — make 
sure some important words are left visible 


8 | Delete any text that’s protruding over the zip 
from below as the film's title needs to goin 
this area. Merge all the text layers and create a mask 
and block out all the text that's below the zip. 


ty 
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3 | Don't worry about readability at this stage as 
most of this text will become unreadable. 

Only a few choice words will remain visible, as if 
we're only hearing part of a conversation in the film. 
Add more layers of text to gradually block out the 
image behind. 


6 | Now we need to add a more prominent line of 
text taken from the film. Place this in the 
centre, away from the large amounts of text, so that 
it stands out. If you think it's needed, add some 
more text in the top corner. 


9 | This corner is still looking very angular, so 
create a new layer and use the Pen tool to 
eat into the straight line. Try to use curved shapes 
that resemble letters — this will help it fit in with the 
current image. 
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Part 4: An eye for love 


Masking out the edge of the eye using the word Love... 


Now add the word Love next to the eye. As 

with the top left corner of the poster, we want 
to mask out the skin next to the eye with this word, 
but there’s no need to set the layers to Overlay. 
Start adding the text and flattening them together 
as you go — this makes things easier. 


og To the right of the eye there's a straight edge 
that needs the same treatment as in the 
previous step. On the eye mask we created in Part 
1, step 12, use the Pen tool to mask this area to 
create a rough edge. 


g Add more type until the straight edge has 
completely vanished — add more to the mask if 
necessary. Flatten all the Love layers together and 
make aselection of this layer. Now go to the eye's 
Shadow layer and add a mask of this selection, 
making the text knockout of the shadow as well 

as the eye. 


a 


Part 5: The finishing touches 


Now for the final touches to make the image into a fully fledged movie poster... 


ty The main image is now complete, so it's time 
to flatten it. Now you need to add all the info 
that goes with the production of the film, like the 
names of the actors, director, and, of course, the 
name of the film. Start by adding a rectangle below 
the main image. 


Q Now duplicate this rectangle making three 
more layers over the first. Then off-set each 
layer slightly. Go to Filter>Blur>Gaussian Blur and 
blur all four blocks very slightly to soften the edges. 


Now start adding the information. Using the 

font Dstruktonaut type ‘a crunch films 
presentation’, making ‘crunch films’ larger than the 
rest of the text. To make ‘crunch films’ stand out 
even more, make the other words a lighter shade of 
the purple behind it. 


5 | Now add the cast lists and also a company 
logo like the one here. Make all the text the 
same size, but the less important information 
should appear in a lighter shade of purple as in the 
previous step. 


34 Now change the bottom three rectangles’ 
Layers Options to Hard Light, and the top layer 
to Overlay. Now make the top three layers 60 per 
cent Opacity and the last 25 per cent. This makes 
the block a nice purple, but it also makes it look like 
it's floating above the main image. 


6 | Now for the final touches. Type the name of 
the film (we've called ours ‘nightbreak’) in 
Dstruktonaut and make it the same purple as the 
box underneath it. Now create a new layer below 
the title layer and make a selection of the film title. 
Then go to Select>Modify>Expand and expand 

the selection to make a nice rounded shape. Now fill 
this with white and flatten the image. The poster's 
now complete. GEES 
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of use with the rock-solid reliability of UNIX. 
And this latest version of Mac OS X is every 
bit as innovative as the computers that run it. 


: Mac OS X v10.2 is widely acclaimed as the 
3 ultimate operating system for the new 
millennium. It blends Apple’s legendary ease 


Whether you are a Mac user who is upgrading, a Windows user 
who is thinking of switching to a Mac or even a UNIX user who 
relishes the idea of commanding an advanced, crash-proof and 
secure UNIX-based operating system, this is the one for you. 


Quartz Extreme is another great feature, giving you graphics that 
are incredibly fast. Mac OS X uses the power of your computer's 
built-in graphics engine to make your desktop — and everything you 
see — more responsive. This hardware accelerated, fully composited 
graphics system gives souped up 2D and 3D capabilities. 


Then there is Rendezvous, revolutionary technology using the 
industry standard IP networking protocol that lets you create an 
instant network of computers, printers and other peripheral 
devices over AirPort, Bluetooth, USB or FireWire — without having 
to manually configure drivers or settings. Mac OS X does it all for 
you — automatically. 


Mac OS X v10.2 also debuts QuickTime 6, the next generation 
multi-media standard that supports MPEG-4 video, the new 
worldwide medium for playing and viewing professional quality 
audio and video on the internet. 


Combine these and many other great features with the fact that 
the complete Adobe Design Collection runs superbly on Mac OS X 
and you have an operating system that leaves others where they 
belong — firmly in the past. 


* 


www.apple.com/uk/macosx 


and other countries. Quartz and Rendezvous are trademarks of Apple Computer, Inc. Other product and company names mentioned herein may be trademarks of their respective companies. 
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Animating 
type in Flash 


Find out how to crunch and squash type, 
create sequences of falling text, and publish 


them on your Website... 


his tutorial follows a fictitious 
scenario: the make-believe 
company Crunch Films has 
i commissioned us to build two 
typographic animations to be used for its 
new documentary film. Pixelsurgeonhas | 
created a typeface, Dstruktonaut, 
specifically for this project, so we use 
this throughout. | 
We take you through the entire | 
process: from installing the typeface | 
onto your computer to the final step of | 
publishing the Flash movie. 
The finished movies will act as small 
‘sting’ animations to add movement and 
life to the Crunch Films Website. We 
aim to make these animations reusable, 
so that the HTML designers can use 
them ina number of different places 
on the site. 
The animations are both between one 
and two seconds, and will give visitors 
to the site a brief taste of Crunch Films 
and its new documentary film. The 
powerful thing behind a short and simple 


animation like Sting 1, is that you can 
simply change the colour of the 
rectangles to give the animationa 
different flavour. Sting 2 is also versatile, 
as by simply changing the order in which 
the characters drop gives the animation 
a completely different feel. This 
versatility enables Crunch Films to use 
these animations in several different 
ways to suit its own particular needs. 

Please note that this tutorial was 
created ona PC; if you're using an Apple, 
there will be slight differences in the 
way you install the font. _ 
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Part 1: Installing the font 


Save the typeface Dstruktonaut to your computer... 


Open the Fonts folder by double-clicking 

on it. Then click File>Install New Font. Browse 
for the file you saved to the temporary directory we 
created, called flash_typography_tutorial. Then click 


rt | Create a temporary directory on your hard 


SP eORCeR on the font file and click OK. Now that the typeface 
drive called flash_typography_tutorial and — has been installed, let's get onto the exciting bit of 
save the typeface to that directory. It doesn't matter py Now you need to install the Dstruktonaut actually putting it into practice (some computers 
where you create this directory — just make sure you typeface onto your computer. Go to the Start might require you to reboot the system in order 
remember where it is. Menu>Settings>Control Panel. for the typeface to register). 


Part 2: Sting 1 - Crunching text 


Creating, separating and animating your text... 


crunch films 


Open up Flash MX and create a new file ‘a — PRE : | 

called crunch_films_sting01 in the ia . : 
flash_typography_tutorial directory you created eee San — Time to create the initial text for the 
earlier. Now you need to set up a couple of things. Now adjust a couple more important settings. typography of the Crunch Films logo. Click 
Open the Publish Settings window (File>Publish Adjust the Movie height to 56 and the width to —_ on the Text tool and type ‘crunch films’, using size 
Settings). Now click on the Flash tab and change 513, the Frame Rate (fps) to 24. (These canbe found 44 and typeface Dstruktonaut. Make sure the text 
the Version drop-down to Flash Player 4. The on the Properties panel. If the Properties panel isnot type is set to Static Text in the Properties panel. 
reason we've chosen Flash 4 for the Publish setting open, click on Window>Properties.) We've chosen (If you're doing design work in Flash, we've found 
is that we won't be using any Flash 5 or MX to set the fps at 24 because it gives a very snappy, that Flash MX has a helpful utility that lays out the 
ActionScript, and Flash 4 allows more viewers to lively feel on the animations, and almost all panel sets for you. Click on Window>Panel 
view the finished Flash movies. computers are fast enough to play it at that speed. Sets>Designer[1024x768].) 


cunch films 


graphic symbol, so that you can tween and 
animate them separately. Click on the first ‘c' and 
click Insert>Convert to Symbol. Then type 
g_character_c in the Name field and select the 
Graphic behaviour. As a standard, we always name 
Graphics with a leading ‘g_' so that it’s easy to 
identify them quickly in the Library. Then hit OK. G Now place each of the new symbols on its own 


For the other characters, carry on naming them as layer so you can animate it separately. First, 
4 | Now you need to break up the textso youcan —_g_character_r, g_character_u, and so on. You won't create 10 new layers, so we have a total of 11 

animate it. Select the text, then click on need to make another symbol for the second ‘c’; layers, and name them char_c1, char_r, char_u, 
Modify>Break Apart. This makes each character a simply use g_character_c again — this saves on file char_n, char_c2, char_h, char_f, char_i, char_l, 
separate text field. size as well. char_m, and char_s. 


Kerning in Flash 


Flash has an easy-to-use kerning 
controller on the Properties 
panel. (To see these options, first 
select a text field.) Simply drag 
the slider up or down and the text 
updates dynamically, so you can 
see the effects. 


Helpful panel sets 


Flash MX has a new option that is 
handy for laying out your panels 
ina useful fashion. Simply click 
on Window>Panel Sets and 
choose your preference (based 
on whether you're designing or 
coding and what screen 
resolution you're running). 


Click on each character and cut it (Edit>Cut), 

then click on the next layer above and paste it 
in place (Edit>Paste in Place). Make sure you match 
the character with the corresponding named layer. 


10 | Now for that ‘crunch’ effect. On keyframe 7, 
move the characters horizontally so that they 
move towards the centre of the word crunch. We've 
used the X values (which can be manipulated on the 
Info panel): char_c1 = 11.7, char_r = 27.6, char_u = 
43.6, char_n = 61.7, char_c2 = 80.0, char_h = 95.6. 
However, feel free to arrange them as you think 
looks best. Now, if you hit Enter to make the 
playhead move, you'll see the subtle and quick 
crunch effect on the word crunch. 


Then add new keyframes for char_s on frame 
25, char_m on frame 27, char_l on frame 29, 
char_i on frame 31, and char_f on frame 33. 


2s 

You're now going to add a quick ‘crunch’ effect 

to the word crunch. This is an effective way of 
making the viewers remember the identity of the film 
company. When dealing with short animation stings, 
it's often best to find a very quick, but memorable, 
animation effect that ties in with the identity or 
brand. On layers char_c1, char_r, char_u, char_n, 
char_c2, char_h, add a keyframe on frame six. The 
easiest way to do this is click on frame 6 on layer 
char_h and drag down to layer char_c1 (highlighting 
them all) then click on Insert>Keyframe. 


Following the crunch effect, animate the ‘films’ 

characters. Drag your mouse down frame 52 
from the top layer to the bottom layer and then 
insert keyframes (Insert>Keyframes). 


What you're moving towards is getting the 
characters from ‘films’ to slide in from the 
right. In order to do this, slide the characters’ first 
keyframe so that the characters are off the canvas to 
the right. Then change the horizontal transform to 
200 per cent (on the Transform panel). Make sure 
the Constrain checkbox is not checked. 


+ Properties 


Then repeat this process to insert keyframes on 
frames 7 and 8. At the moment, there's no 
change between all of these frames, but don't worry 

as you'll be doing that next. 


Then drag the first keyframes for layer char_s 
to 15, char_m to 17, char_| to 19, char_ito 21, 
and char_f to 23. 


5B 5 eacne BOeee HO. 9500 
Now for an effect that makes the characters 
ease from a light grey to black, as they slide in 
from the right. Click each letter, and then click on 
Colour and select Tint. Then enter 153, 153, 153 for 


the RGB values. > 
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Part 2: Sting 1 - Crunching text continued... 


Then add a Motion Tween to keyframes 15, 
17, 19, 21 and 23, all with Ease set to 100. 


ell 
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Now you need to place these keyframes. Drag 

the first frame for the rec_s layer to frame 22, 
rec_m to frame 24, rec_| to frame 26, rec_i to frame 
28, rec_f to frame 30. Then add another keyframe 
for each layer two frames later (see screenshot). 


Here's a subtle effect that gives the animation 

some extra flavour. Create a new symbol 
(Insert>New Symbol) and name it g_square. Inside 
that symbol, make a rectangle that is 17.4 width by 
50.5 height, #FFCC33 colour. Make sure its top left 
corner is at X: 0, Y: 0. This makes resizing the 
symbol much easier. 
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You can make each of these orange blocks fall 
into the canvas as the characters come on the 

screen. Make the first keyframe Y: -55. Then click on 

each of those keyframes and give it a Motion Tween. 


18 | Create a new layer called rec_f (rectangle_f) 
and drag the g_rectangle symbol from the 
library and place it at X: 134.8 and Y: 2.8. Then 
create the other layers rec_i, rec_l, and so on. Then 
line up the rectangles underneath the characters 
(see above screenshot). 


arenes mist 


Make the orange rectangles quickly drop out 

of the canvas. Add keyframes to each 
rectangle layer starting on frame 40. On the last 
keyframe for each rectangle layer, change the Y 
value for the rectangles to 59.0. Then add a Motion 
Tween to the first keyframe. This short sting 
animation is now complete. Place the playhead at 
frame one and hit Enter to see the final result. To 
learn how to prepare this animation for the Web, 
jump to step 18 of Sting 2 animation. 


Part 3: Sting 2 - Bouncing text 


Creating different animation effects and publishing your results... 


It's now time to create the second sting 

animation for Crunch Films. Open up Flash MX 
and create a new file called crunch_films_stingO2 in 
the flash_typography_tutorial directory you created 
earlier. Adjust the Publish setting to Flash Player 4 
(these can be found on the Properties panel. If the 
Properties panel is not open, click on 
Window>Properties). 


Adjust the Movie height to 56 and the width 
to 513, the Frame Rate (fps) to 24. We've 
chosen to set the fps at 24 because it gives us a very 
snappy, lively feel on the animations, and almost all 

computers are fast enough to play it at that speed. 


As with Sting 1 you need to create the initial 

text for the typography of Crunch Films. Click 
on the text tool and type ‘crunch films’, using size 
44 and the Dstruktonaut typeface. Make sure the 
text type is set to Static Text in the Properties panel. 
(If you're doing design work in Flash, we've found 
that Flash MX has a helpful utility that lays out the 
panel sets for you. Click on Window>Panel 
Sets>Designer[1024x768].) Just pick the resolution 
that matches your screen. 


Creating the 
‘squash’ effect 


We've used a squashing effect on 
Sting 2, which adds a very fun 
feel to any animation. If your 
symbol is bouncing on the 
ground, simply adjust the height 
of the symbol to about 70 per 
cent on the keyframe where it’s 
striking the ground. This will give 
you a fun squashy effect. 
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6 | Make each text field its own graphic symbol, 
so that you can tween and animate them 
separately. Click on the first ‘c' and click 
Insert>Convert to Symbol. Then type g_character_c 
in the Name field and select the Graphic behaviour. 
Then hit OK. For the other characters, carry on 
naming them as g_character_r, g_character_u, and 
so on. You won't need to make another symbol for 
the second '‘c' in crunch films. Simply use 
g_character_c again — this saves on file size as well. 


me el 


oper 
A) — | 


Break up the text so you can animate it. Select 

the text, then click on Modify>Break Apart. 
This makes each character a separate text field, 
which you then convert to a symbol. 
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7 Click the playhead to frame 1 and select all 


the character symbols. Then move them to 8 | Click the playhead on frame 4 and select all the 

character symbols. On the Transform panel, 
make sure the Constrain check box is unchecked 
and change the height to 69 per cent. 


Y: -54.4. A handy way to do this by eye is to use the 
arrow keys on your keyboard (and to move an 
object more quickly, hold down the Shift key). 


You can add some motion by adding a Motion 
10 | Tween to each of the keyframes. A quick way Now comes the really fun bit, where you can 
of doing this is to drag your mouse from the top @ change the file in a ton of different ways to 
layer to the bottom layer on the keyframes, and give you different effects. First, add frames up to 
then select Motion on the Tween drop-down onthe _ frame 17 by dragging your mouse from the top 
Properties panel. This adds a Motion Tween toeach _layer to the bottom on frame 17 and then insert 
of the keyframes. frames (Insert>Frame). 


‘= Lbrary = crunch films stingO2, 


G Now place each of the new symbols on its own 
layer so we can animate them separately. 
Create 10 new layers, so you have a total of 11 
layers. Then click on each character and cut it 
(Edit>Cut), then click on the next layer above and 
paste it in place (Edit>Paste in Place). Then name 
each layer so it corresponds with its character. 
We've chosen char_c1, char_r, char_u, and so on. 
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Move those characters back down a bit, so it 
gives them the appearance of squashing as 
they hit the ground. Put the playhead at frame 4 
and select all the characters and change the Y value 
on the Info panel to 14.8. 


|crurch films le 


We've chosen to make the letters fall in a 
certain order, but you can do as you please. 
We've gone with this order because it gives the 
animation a fun, bouncy feel. But go nuts and have 
fun. Simply drag your mouse from frame 1 to frame 
7 and release the mouse. Then you can drag the set 
of frames where you'd like them to go. > 


Tutorial Animating type in Flash 


ica 


48 | Tutorial Animating type in Flash 


Sting 2 — Bouncing text continued... 


Inspiring movie 
trailers 


Film title sequences and trailers 
are a neverending source of 
inspiration for typography uses. 

If you've got a broadband Internet 
connection, point your browser at 
[w] wwwapple.com/trailers. 


Here is the final sequence that we've chosen 
13 for the effect, but there are many other 
possibilities. To see more examples of orders for the 
falling characters, see the next step. 


16 | Drag the keyframes to make the first and last 
characters of each word fall at the same time, 
then proceed inward: first the word ‘crunch’ and 
then the word ‘films’. 


Now select the Formats tab, Uncheck 
‘Use Default Names’, which allows you to 
choose the filename that's published for both 

the swf and HTML file. We've chosen 
crunch_films_stringO2_final.swf and 
crunch_films_stingO2_final.html. You don't need to 
choose different names from the default, but we 
find it useful to be able tell the difference between 
the published swf's and the testing swf’s (which are 
created by simply hitting Ctrl+Enter). 


14 | Here's a second option, which makes the 


characters fall from both words simultaneously. 


17 And now for one of our favourite variations on 

the theme, which we think gives the animation 

a very fun feel. All of the characters fall, and then at 
the end, after a short delay, the final ‘h’ falls. 


& Select the Flash tab. As we've already explained, 
we're going to use the Flash Player 4 for these 
animations, as they can be viewed by more people. 
And as a general rule of thumb, it's a good idea to 
check ‘Protect from import’ so sneaky people who 
are trying to copy your movie won't be able to save 
the swf and bring it into Flash to edit. It’s fine to leave 
all the other settings to their default state. 


For the next possible animation, add a few 

frames to the end of the animation before 
moving the keyframes. Drag your mouse down 
from the top layer to the bottom on frame 20. Then 
insert frames (Insert>Frame). 
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8 | To make it ready for the HTML programmers 
to use on the Web page, you need to publish 
it. First, however, you need to adjust the publish 
settings. Click File>Publish Settings and choose the 
Formats tab. 
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& Now select the HTML tab. Under Template, 
we've chosen ‘Detect for Flash 4’. If you've got 
some experience with JavaScript and HTML, this is a 
good option. If you don't feel comfortable with 
those subjects, it's best to leave it at the default of 
‘Flash only’. The rest of the options can be left at the 
default. Now you can hit the Publish button. This 
saves the crunch_films_stringO2_final.swf and 
crunch_films_string02_final.html files to your 
flash_typography_tutorial directory. EEE 
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Our typefaces speak fo themselves... 
We'll let our customers speak for us. 


‘| wouldn't buy my fonts anywhere else." 


font - Voyou from 2Rebels 


‘Delighted with your exemplary response - fast, 


efficient and wonderfully professional." 
e font - Barmeno hes os 


‘Fauttless... yet again.” 


font - Cafe Noir from 2Rebels 


" ALanks es qt +fhe fovts, everything 
iNStalled and lovely. Tp sevice." 


font - Dizzy from FontBureau 


‘Exceedingly good knowledgeable and 
quick service! Very impressed’ 


font - Boggle from 2Rebels 


“Thanks for a very prompt, efficient 
and pleasant service.” 


font - Concept Sans Medium from Absolutetype 


"the service is always quick and easy.” 


font - Eternity Bold from 2Rebels 


‘Always a pleasure dealing with Faces” 


font - Aesop from FineFonts 


And we'd love to speak to YOU. 
Call for your free catalogue, 
01276 38888. 


Fonts and royalty free images. 


Wide choice of foundries. Single weights to 
full libraries for Mac and PC. 


Licensing advice. Custom designed fonts and characters. 


Faces Ltd 349 Yorktown Road, College Town, Sandhurst, Berks GU47 OPX 
t: 01276 38888 es fonts@faces.co.uk  www.faces.co.uk 


image: DigitalVision non credited font: Dax Regular, Bold and Black from FontFont 
All product names and trademarks are acknowledged to their fespective owners. 
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Illustration: Magictorch [w] www.magictorch.com 


mi 


Tutorial and After Effects 
production by Chris James 
Hewitt: [w] www.dstrukt.net, 
[w] www. systrn.net, [e] 
Chris@Dstrukt.net. 

Audio by Steven De Loenen: 
{w] www. stoav.be, [e] stoav. 
awareness@worldonline.be. 
Typeface by Jason Arber: 
[wl www.pixelsurgeon.com, 
{e] Jason@pixelsurgeon.com. 


Files on disc 

The files needed to support 
this tutorial can be found in the 
Tutorial\Film folder on the 
cover CD. The typeface 
Dstruktonaut ts also on the CD. 


Smooth-moving 


text in After Effects 


Adobe's After Effects is a cutting edge tool used for creating rich 
motion graphics and effects used globally for film, video, broadcast 
and the Web. Type is an important area of this moving image realm... 


his tutorial involves quite a 
simplistic approach to type 
animation, but one that 
could also be applied to 
other areas of moving image such as 
footage or 3D. We've tried to find a style 
of animation that suits the design of the 
Dstruktonaut typeface supplied by 
Jason Arber at Pixelsurgeon. 


The first thing we noticed was how 
smooth the font was, so we wanted the 
overall pace of the animation to be very 
subtle and relaxed, thus linking the two 
elements together. Each character of the 


font is built up from an equal weight line, 


so with this in mind we envisaged the 
line of the characters being built by a 
travelling mask. The mask would build 


and then deconstruct certain parts of 
the font to then reveal the full letter. 

Throughout the tutorial we cover 
many aspects of After Effects, such as 
masking, path strokes and velocity 
tweening. This should give you an 
insight into how the application works 
as well as show you how to combine 
type with motion. > 
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Part 1: Type construction 


Using Photoshop to create the foundations for your movie, you'll then 
construct your typeface in After Effects... 


Gass 


3 With each glyph being completely different 
from the rest, the run-offs differ in size and 


1 | Open Photoshop and begin playing with 
colour variants for the background. We've After writing the word ‘crush’, deconstruct 


chosen a dark gradient using a deep red that runs each letter and build extensions to each run- direction. Once the process is complete you're left 
into a brown. As the movie is quite a simplistic piece —_off point. Each run-off should be built up of two to with a complex map of lines and curves that are 
you don't want the background to be too three layers that correspond to one glyph. By ready for animation. One way of doing this is by 
overpowering; it's important to keep the overall placing each run-off on a different layer, you'll be using Photoshop. You could also use a vector 

type animation the focal point throughout. able to tween every element to the finest point. program like ///ustrator to achieve the same effect. 


4 | The first thing you need to do is set up your composition for the piece. 
Open After Effects and go to Composition>New Composition. The 
Composition name can be whatever you choose; we've named it CA Master. 
Set the width and height to 550x400 (because this is a Web-based project it’s 
pointless working at the PAL resolution of 768x567). Set the framerate to 25 
Frames per second. You're then presented with the timeline and canvas. Before 
starting any project we recommend you set up sub-folders in the Properties 
window. This way you can easily find and reach all your source files. 

Now set up separate composition windows. Your master comp will hold all the 
separate pieces of the movie that will then form the entire piece. For this project 
you'll need three sub-compositions, named: Crush, Type, and Bind. 

* Crush will be the animation for the word ‘crush’. 
* Type will be the animation for the word ‘type’. 
* Bind will be the composition that then brings the two together. 


5 | By going to File>Import, select the PSD file you created earlier and bring it 
into After Effects as a ‘composition’. This basically means every layer of the 
file is included separately into one whole composition. When importing an 
element as ‘footage’, you can either receive a flat or a certain element to that file, 
You now need to drag this file into your composition ‘crush’. By double-clicking 
the PSD in the Properties palette you'll open a new timeline containing all the 
separated glyphs and the run-offs just like in Photoshop. 


Make life easier 


Before starting any After Effects 
project we recommend that you 
arrange your folders and files. In 
the Properties palette create new 
folders that correspond to the 
kind of files you'll be importing 
into the program. 
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6 | With all your layers in place, you now have to set each letter in the 
timeline. As the ‘c' is the first letter in the word ‘crush’ this will be the first 
glyph to be animated. Taking ‘c' and the run-off layers, which in this case are ‘C 
across’, you need to set them at the very start of the animation while all the 
other letters will follow. When all the layers are set out, you can begin to 
animate ‘C across’ — this is the top run-off point to the letter ‘c’ By right-clicking 
the layer in the timeline you need to select ‘new mask’. You'll now see the layer 
has a yellow border around it — this is the mask parameter. 


Full | Active Camera | 
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8 | From here you need to bring the letter ‘c’ into point. Because the focus of 
this animation is to show the construction of type, the ‘c’ will be built by 
the run-off layer we've just animated. The ‘c’ layer must be placed to start 
exactly after the ‘C across’ transition is over. After selecting the layer, go to the 
toolbox and choose the Pen tool. Draw the inner line of the letter, in its simplest 
form. Basically, you're redrawing the glyph. The drawn line doesn't have to be 
perfect because your stroke can be adjusted to suit the weight of the letter and 
also any curves you encounter. 


Once the mask has been set, you need to add a keyframe by clicking the 


tab to the left of the masks options. With this now in place you can move 
the keyframe along to the point in the timeline where you want the mask to 
finish — your end point for this movement is 02.06 seconds. You should then go 
back to the start of the timeline and select the whole mask. With this selected, 
move the mask to the right so none of the ‘C across’ is left in the canvas 
window. Now when you preview the piece so far (‘0' on the number pad or 
press the RAM render button and the time control panel) the 'C across’ line 
builds along the canvas. 


(7 An masks 
F Stroke Sequentiaity 


Brush Size 
b Gj Brush Hardness 
SB} Opacity 


GJ Paint Style 


9 | With this in place, you now need to add the stroke effect by going to 
Effects>Render>Stroke. After selecting the plug-in, the first thing you 
need to check is that the Paint Style is set to Reveal Original Image. This will 
cause your stroke to reveal the original layer via an animated path. Next the 
Brush Size should be chosen. Choose a Weight of 5. This is just right for the 
width of the font face. Select a Brush Hardness of 79 per cent as this will make 
the overall tween much smoother on the eye. All that's left now is to set the 
start and finish points to the transition. > 


Tutorial Smooth-moving text in After Effects 


| Tutorial Smooth-moving text in After Effects 


Part 2: Type transitions 


Reversing your initial transitions, you'll now implement the typeface's deconstruction 
and closing sequence using a variety of plug-ins and movements... 


Low on memory? 


If you're using a machine that 
doesn't contain a high amount of 
memory, you'll notice the RAM 
render will be very short. Try 
zooming out by 50 percent and 
setting the quality tab to half. 
Now your RAM render will last 


much longer. 
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u You need the tween to finish at the three-second marker, so set a 
keyframe and then go to the Effects palette to change the values of the 
stroke. As this is the end frame, the ‘end’ value must be set to 100 per cent, and 
the start frame should be set to 0 per cent. If you hit the RAM render button, 
you'll see how the animation is starting to build. 


@ Once both words fully animated, you need to bind them together into one 
whole animation. After deciding the letter ‘h' of ‘crunch’ would run 
perfectly into the letter ‘t' from the word ‘type’, begin to use your Null layer. A 
Null layer in its basic form can cause a series of layers to move, scale, or rotate 
together as one. First, place the two word compositions into a new comp 
window, placing the ‘crush’ comp above the ‘type’ comp. By tweaking the 
positions, you can set the run-off of letter ‘h’ to touch the starting point of the 
run-off to the letter ‘t’. 

Next, place a Null layer above both layers and set it to begin just at the end of 
the ‘crush’ composition. Now attach the two words to the Null: select them 
(using Shift on your keyboard) then hit the ‘switches’ tab at the bottom of the 
time. Using the ‘parent’ drop-down menu, continue to select the Null layer. 

By pressing 'P’ on the keyboard you can set the position of both separate 
compositions. Set a keyframe at the start of the Null layer then, roughly one 
second into the layer, move the position up to the top and slightly to the left of 
the canvas. You'll find that the Null has now dragged both comps upwards 
leaving only the ‘type’ composition on the canvas. If you now perform a RAM 
render, you can watch how both layers move together to form one transition. 


2 | The next stage is to bring on the second run-off point to the letter ‘c’ thus 
constructing and deconstructing the glyph. By selecting the 'C across’ 
layer and opening the mask properties you need to reverse the process that was 
used at the start. To keep the animation looking fluent, you need the reverse 
movement to start as soon as the letter ‘c' has started to build — do this by 
setting a keyframe at the end of c’s tween and move the mask across the canvas 
to the left all the way until none of the graphic is showing. This process now 
wipes the layer away to the left leaving the full letter on the canvas. For any 
letters that may contain two or three run-off points, the same method should 

be used throughout. Find a point on the letter that can build the typeface, and 
then choose a run-off on the glyph where the face can be revealed in whole. 
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a Once the Null transitions are complete, place your new composition into 
the master comp. This composition will hold place to your background and 
any other effects or files you might want to place over or beneath the type. 

To start, you want the words to scale and slide into position. By pressing ‘S' on 
your keyboard, you're presented with the Scale Properties menu. Here you can 
tween the layer in size. First, set a keyframe at where you'd like the scale 
transition to end, then go back down the timeline to where you'd like the movie 
to start. Add a keyframe and drop the percentage slider down to your desired 
size — in this case, 73. Then press ‘P’ on your keyboard and you'll be presented 
with the Position menu. Using the same keyframe process as on the scale 
transition, set a start and end point for the layer's position. In this case, move 
the words slightly from the right to left but set the end point of the position 
tween much further into the timeline than the ending to the scale tween, 
keeping the look of the movie much more fluent. 


Colour coding 


If you're working on layer- 
intense After Effects projects, try 
naming each layer individually 
and colour coding them ina 
format you'll recognise. This will 
help you keep track when you're 
working with numerous layers. 


Keep things 
together 


Atthe end of any After Effects 
project, use the ‘collect files’ 
feature to locate and bring 
together all your used elements 
within your AE comp. This will 
prevent you from deleting any 
important files and will keep 
everything together in one folder. 


then reveal the end text information and logos. 


Import and set the new layer into the Type composition within After Effects 
just after the word ‘type’ has finished building. Open the position menu and set 
a keyframe at the start of the layer and move the type to the right of the 
canvas. Then set the timeline header roughly a second later into the timeline 
and drag the TM just slightly over the letter ‘e’. Here you need to achieve a 


5 | Referring back to Photoshop or I/lustrator, bring in the trademark sign 
(TM) and use this as the core element to which the type would disappear 
from the canvas. The concept is to make the TM slide into place next to the 
letter ‘e’, bounce off the glyph and push the word ‘type’ out of the canvas to 


bounce-like effect. Take your timeline header back around ten frames and then G From here you need to bring off the main word animated earlier. At the 


drag the TM to its end position and right-click the keyframe to select ease out. 
By using Ease in or out, the frame's velocity will modify the way the animation 
comes to stop or start — in this case, you need the transition to slowly ease out 
to a standalone position. By selecting the Position menu's drop-down you can 


manually ease in or ease out the layer's movements. 


With the main word scaling off the canvas, 
you now need to add some depth to the 
actual scale transition. Go to Layer in the menu bar 
and add an Adjustment layer. An Adjustment layer 
can add effects to anything that sits below it in the 
timeline. By selecting Effects>Blur>Radial, you can 

add a zoom effect to all the layers beneath it. 
Keyframe your blur in the same way that you'd 
perform a scale or position transition, using 
keyframes to modify the various settings and 
strengths throughout. 


8 | Now that the main wording has gone, you're 
left with the TM and will continue to bring in 
the end text using a simple frame cut. Frame cutting 
basically entails cutting the layer to start at a certain 
point or finish with no effects applied. By placing the 
timeline header at the point you'd like the layer to 
start, you can press ALT and open curly bracket ({) 
to crop the layer start at this point. Then you can 
press ALT and close bracket (}) to close the layer. Set 
your end type to appear just as the TM had finished 
scaling by the Null layer. 


end point in the timeline where the TM slides in, set a Null layer to scale 
the separate glyphs from 100 per cent to 650 per cent while also scaling the 
TM. From here the only letter showing is ‘e'. Then set an opacity tween to make 
the letter disappear completely. (Pressing ‘T' on your keyboard presents the 
opacity menu.) Using a space of around 20 frames makes the blend ultra quick. 


You've now finished a series of different 

methods to achieve a raw type animation in 
After Effects. The overall anim should flow as one 
and be paced as a relaxed motion piece. The two 
words were built via artificial limbs then 
deconstructed to reveal their original forms. A 
new element was then introduced to bring the 
piece to a close. Throughout this tutorial we've 
covered the basics of keyframing, masking and 
utilising many of After Effects’ features, such as 
adjustment layers and Null layering. We hope this 
has given you an insight into type animation and, 
of course, motion graphics as a whole. FEES 
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FONT FOUNDRY 


[T-26] « 


We talk to T-26's Carlos Sequra about the company’s work, history, 
and its development of a “breakthrough in font marketing”... 


esign company T-26 has one of the most 
recognisable styles in the industry. Its work 
appears in such diverse places as the Wall 

j Street Journal and the 90th anniversary 
book for Harley Davidson, but you're just as likely to 
see it adorning T-shirts, posters, and CDs. According 
to principal designer, Carlos Segura, this flexibility 
and open-minded nature owes much to the company’s 
complex history. 

Astint in a band during his teens — where he was 
responsible for promotions — eventually led Carlos to 
working for Chicago-based advertising agencies. 
Becoming unhappy creatively, he formed Segura Inc. 
in 1991, with the goal of trying to blend as much ‘fine 
art’ into ‘commercial art’ as possible. This spawned 
offshoots including independent record label 
Thickface, custom CDR company 5inch.com, and font 
foundry T-26. “We were in the right place at the right 
time,” comments Carlos, modestly. “We launched T-26 
in 1994, during a very energetic period in graphic 
design, and different points of view were encouraged.” 

The original impetus was derived from a project 
Carlos had done for the Merchandise Mart in Chicago: 
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“| designed a custom font for the international interior 
design and furniture show; press recognition followed 
and we received several awards.” The font ‘Neo’ 
became a desirable item, and everything grew from 
there. Rather than merely becoming yet another font 
foundry, T-26 realised many real-world issues were 
unaddressed by the industry. 

“There was no singular place for someone to search 
out ‘experimental’ or ‘unique’ typography,” explains 
Carlos. “The Web wasn't established then, so you had 
to draw it yourself, or perform a time-consuming 
search with no guarantee of success. We decided to 
develop strategies for a better offering, above and 
beyond the fonts.” (See ‘Where's the money?’) 

The recipe was a success, and the company now has 
six key members, who sometimes work with off-site 
creatives. “When we started T-26, beginners hada 
problem being taken seriously by the industry,” says 
Carlos. “We opened the doors to everyone who wanted 
to send us something and we got some amazing stuff.” 

The company continues to encourage submissions, 
and Carlos reckons treating everyone with respect — 
whether they're long-time professionals or relative > 
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BY JORGE ALDERETE 


1. This is the upcoming catalogue 
from T-26, showcasing new 
releases. It'll soon be mailed to 
thousands of people. Adobe 
Illustrator was the weapon of choice. 
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1. This is a special catalogue that T-26 novices — pays off. This attitude also works with being open-minded. Of course, with that comes the 
made in order to promote a collection of clients. “There's a desire for great relationships with possibility of having a certain segment dislike your 
bitmap fonts. twas created tn Carlos's lients; k hard at this and ft ful,” k, but that’s the price for exploring new territory — 
faveuriasteplicetina Adobe Mustreter, clients; we work hard at this and are often successful, work, but that's the price for exploring y 
was Web printed, and also mailed to says Carlos. “Although there are times when things you can either leave a footprint or sink.” 
40,000 individuals. need to be said, and | would rather be small and work In fact, Carlos would rather avoid talking about style 
with great clients than be large and unhappy.” | altogether: “I like to create, and don't go into it witha 
He is, of course, referring to a ubiquitous problem | purpose of style. What we do works because it’s 
for designers: having clients hire you, then not let you intelligent, attractive, and addresses the market.” 


do what you’re good at. His advice is simple: “Nip 
things in the bud. Create your scenario or the client 


will do it for you.” This approach has paid off: recent Making faces 

projects include custom fonts for Nissan and the | Despite its notoriety, T-26 never knows if end products 

design for DC Comics’ ‘Filth’ series. Earlier projects are will sell, but tries to choose typefaces that enhance their 

just as diverse, and dozens can be found online at | collection. Like the work, techniques vary: “The general 

www.segura-inc.com. belief is digital fonts start digitally, but that’s not the 
While T-26's clients cross many industries, its | case,” exclaims Carlos. “There's often a considerable 

globally recognised style is often apparent. Carlos amount of drawing involved, then we scan the sketches, 


maintains this was never planned: “It’s a by-product of and refine the forms.” Illustrator, Photoshop and 


Where's the money? 


We interrogated T-26 about the best ways to ensure that the cash continues to 
flow, even in the tough economic climate that has recently caused the design 


industry to suffer... 


Right from the start, T-26 set out to 
differentiate itself from everyone else, 
refusing to become another font 
foundry churning out fonts. The 
company’s innovative attitude is 
apparent within its marketing and 
sales model, thereby ensuring 
commercial viability. 

“We were the first — and still only 


— foundry to offer student discounts,” 


explains Carlos. “They find it tricky to 


make ends meet, and data is easy to 
copy; therefore we wanted to earn their 
respect and dedication by being 
sensitive to their reality.” Offering an 
affordable way to acquire T-26 
products without resorting to stealing 
led to a ‘seeding’, which pays off every 


day, since said ‘students’ are now ‘the 


employed industry’ and continue to 
purchase T-26 products. 
T-26 also has a relaxed attitude to 


user licences and service bureau 


usage. “Should you try and kid yourself, 


and pretend people don't send fonts to 
bureaus, or don't install them on 
multiple machines?” asks Carlos. “We 
don't think so, hence offering a ten- 
computer licence by default with every 
font sold, a huge discount when buying 
cross-platform fonts, and also 
permitting designers to send them 
to bureaus, so long as they don't 
archive them.” 

These are examples of 
understanding the reality of the market 
and reactions to it. T-26 also uses 


innovative marketing techniques to 


lodge itself in the public 
consciousness. Along with the 
‘fontkits’, covered elsewhere in this 
article, the company was also 
something of a pioneer with regards to 
the Web — nowa very important sales 
avenue for the company — and video, 
where it created music-video-style 
shorts of each typeface, except the star 
was a font rather than a band. 

Finally, avoiding associations with 
corporate greed was achieved by 
constant contributions and charitable 
donations. As Carlos explains: “To this 
day, T-26 is involved in creating fonts 
where all proceeds are donated to 
non-profit organisations, while also 
generating funds for specific 


educational ventures.” 


Fontographer are weapons of choice, but if software 
restricts the desired effects, they're done by hand. 

T-26 also strives to be unique with its marketing. 
“We decided to present our literature as a ‘gift’ rather 
than a marketing tool,” says Carlos. This resulted in 
limited edition ‘fontkits’ full of materials featuring the 
fonts of that period. “A breakthrough in font marketing,” 
declares Carlos. “Totally different to everyone else 
and instantly ‘collectible’ — limited kits are never 
reprinted.” The numbered fontkits (currently at #24) 
come in silk-screened bags, full of catalogues, posters, 
postcards, coasters and more. Each font is displayed on 
a full-spread canvas, which is ‘designed’ instead of 
simply put ona sheet. 

However, a downside to T-26’s popularity is that 
aspects of its design regularly show up in other 
people's work. “It’s human nature and happens in every 
field,” explains Carlos. However, he reckons this has a 


detrimental effect on the market, and that innovation 
is also staunched by piracy: “There's too much copying. 
It's hard enough for individuals to make a living without 
everyone copying files, so we have to inform. 
Magazines like yourself have to do a better job of 
communicating the pitfalls.” 

Not to end ona dour note, Carlos predicts great 
things for the industry and for T-26: “Both will evolve, 
and T-26 will continue to offer unique products that 
have a playfulness and experimentation.” He 
concludes: “I've been fortunate in doing interesting 
work, meeting fine people, and being able to work fora 
living doing something | really enjoy.” EES 


2. While most companies would settle for 
offering the odd T-shirt, T-26 once again 
bucks the trend, and also offers aprons, 
with the boast ‘one size fits all’. Indeed. 


3. The merchandise section of the T-26 
Website is quite an eye-opener. Far from 
merely selling fonts, a huge range of 
T-shirts is on offer, on display via a slick 
Flash interface. 


4. This is the vehicle that T-26 uses to 


deliver its fonts to those customers that 
still prefer receiving a physical package. 
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a Some of the most frequently asked questions about 
document design and font usage are addressed by 
the Computer Arts Special experts... z 


hen laying out a document, you can get well and truly bogged down with rules and conventions 
that no one but a typesetter would even notice. That said, there are a few tips that can give youa 
shortcut to a neater-looking layout, and a more consistent style for your documents. 

Over the next three pages, we've gathered together some of the most frequently asked 
questions about fonts, layout, and document design as well as a few interesting snippets about well-known 
typefaces, characters and font formats. =) | Expertise provided by 

We've also tried to answer a few questions about font design, and why the written word so often looks the Christian Darkin. You can 
way it does. Some of the answers are historical, some are technical, some are creative, and a rather 
surprising number start and end with Microsoft. > 


Contact Christian at [e] 
christian@darkin.demon.co.uk 
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Glossary 


GLOSSARY WORDS AND PICTURE SUPPLIED BY 
AGFA MONOTYPE [W] WWW.FONTS.COM 


Ampersand (&) Symbol for the contraction of an 
archaic phrase meaning ‘and’. An evolvement from the 
Latin ligature ‘et’. 


Arm A horizontal stroke that is free on one or both ends. 


Ascender The part of the lowercase b, d, f,h, k, Landt 


; 3 that extends above the height of the lowercase x. 
0182 26 


Bar The horizontal stroke of the e, f,t, A, H, and T. 


a is Baseline An imaginary line on which the letters rest. 
' Descenders fall below the baseline. 


« 


Boldface A heavier version of the normal weight of 
the typeface. 


Bowl A curved stroke that encloses a counter, except 
the lower portion of the two-storied lowercase g, 


which is called a ‘loop’. 


Calligraphy A writing style based on flat-tipped pen or 
brush strokes. 


Cap-Line An imaginary line that runs along the top of 
the capital letters. 


Characters Individual letters, figures, punctuation 
marks, etc. 


Character Set The letters, numbers, punctuation 
marks and special characters that constitute a font. 


Condensed Classification of a typestyle in which the 
letters are narrower than normal. 


Counter Fully or partially enclosed space within 
a letter. 


Cursive Typefaces resembling handwritten script. 


Descender The part of the letters g, j, p,q and y that 
extends below the baseline. 


Display Type Type that, by its size or weight, is used to 
attract attention, usually 14 point or larger. 


Ear The small stroke projecting from the right side of 
the upper bowl of the lowercase g. 


Em Normally the square of a given point size of type. 
Can be narrower, or wider, depending on the 
proportions of the typestyle used. 

En Half the width of an em. 


Expanded Classification of a typestyle in which the 
letters are wider than normal. 


Hairline The thin stroke in a serif type design. 


Who designed Arial, and where did the 
inspiration come from? 


Arialis, in fact, a cheap knock-off. Its story is one 
of corporate might triumphing over good design. 

From the ’50s to the ’70s, the most popular and 
trendy typeface was Helvetica. It was designed by the 
Hass Foundry of Switzerland. When PostScript was 
developed, Adobe 
chose Helvetica as 
one of its four fonts 
and promoted it 
widely. This meant 
that cheap copies 
ended up being 
produced by those 
who wanted 
Helvetica’s style 
but didn't want to pay 
for it. One of these 
was Arial. Arial is almost a clone of the 

Neverkeento pay _ typeface Helvetica. It's become so 
for anything it didn't popular because it was found to be 


need to, Microsoft cheaper to license when Microsoft 
picked Arial die came to release Windows 3.1. 


standard font when it developed Windows 3.1, and 
proceeded to bundle it with every piece of software it 
subsequently produced. 

As a result, Arial pervades the PC, the Mac, and the 
Net, and poor old Helvetica is relegated to the 
typographical wilderness. Many professional 
designers wouldn't dream of using Arial, and stick 
firmly to Helvetica; many more younger ones have 
never even heard of Helvetica, and see Arial as just 
what they need for that modern look. 


Inactive Window 


Printer fonts and Screen fonts: where do 
they go and do you need all of them on 
your PC/Mac? 


Printer fonts are fonts stored in your printer or on 
A a cartridge. They’re designed simply to be 
printed, not displayed on screen, so you can't see what 
they’ll look like until they're printed out. On screen 
they’re substituted with a Screen font stored in your 
computer. Screen fonts are bitmapped versions — in 
other words, they look pretty much like the printer 
font but will become blocky when scaled up. 

Most users prefer to see exactly what they're 
going to print, and therefore use TrueType or 
PostScript fonts because they look the same on 
screen as on paper. 


How long does it take for someone to 
design a font? 


How long you'll take to design a font will 
depend on what you intend to use it for, 
and how seriously you’re taking it. Before 
you even start, you'll need to come up with 
a concept for your font, and this can be as 
time-consuming as the actual design. 
To do the job properly, you’ll need to 
design capital and lowercase letters and a 
full set of punctuation marks and symbols. 
Many designers leave out a lot of the 


punctuation, which can be infuriating if you suddenly 
realise there are no speech marks or pound sign in the 
font you're using. 

If you want a complete and usable typeface, you 
should expect it to take weeks rather than days. 
However, if yourtypeface is for a logo, you might only 
need to design a few letters. 


What's the difference between an em dash 
and an en dash? 


Em dashes and en dashes are two different sizes 

of horizontal line used to break up, or connect, 
words and phrases and to stand in for missing words or 
letters. The rules are complex, and can depend on the 
varying lengths of dashes in a particular typeface or 
the style of your layout, but in general: 

En dashes are small (half the size of the type point) 
and are used in place of the word ‘to’ (ie Pages 1-6). 
They're also used to specify joint responsibility (Le the 
Major-Currie affair). 

Em dashes are larger (the point size of the text) and 
are used to link phrases or compare them, to replace 
brackets, or to indicate a range of numbers where the 
final number is not known (ie John Major 1943—). You 
can use double em dashes to indicate missing letters 
(ie F——ing John Major) or triple ones for whole 
missing words (i.e John ——— Major) 


Q How did the Euro sign originate? 


The Euro symbol needed to be as mucha 

trademark for a product the designers were 
hoping to sell as a denotation of currency. Its design 
was deliberately logo-like. On the one hand, it’s a 
fusion of the letters E and C. On the other it’s 
reminiscent of the Greek letter Epsilon — with its 
echoes of the cradle of European civilisation. Other 
spokespeople have described it as an E for Europe 
crossed by two horizontal lines indicating the stability 
that the creators wish for the currency. 

An alternative explanation given by the German 
press was that the inventor of the symbol was in fact 
Arthur Eisenmenger, the European Community's 
former Senior Art Director, who 24 years previously 


There are strict guidelines on how the Euro symbol should look. Most font 
designers simply ignore them and do their own thing. 


had doodled the figure on a scrap of card without 
really thinking it through, then abandoned it. Later, the 
sketch was re-discovered and taken on because 
nobody could think of anything better... 


What's the correct typesetting for spaces 
between sentences and paragraphs? 


Most people were taught to type with two spaces 

after a full stop, and two hard returns after a 
paragraph. These are both technically wrong. The first 
convention was developed for manual typewriters, 
where the spaces between letters tended to be larger, 
and so a double-space after a full stop gave the 
necessary separation between sentences. Today's 
fonts are more intuitively and closely spaced, so only 
one space is really needed. If you've been taught to 
touch-type, the double-space is a hard habit to break. 

As for paragraph spaces, people use the double- 

return as a convenience. In fact, a space of slightly less 
— between 1.6 and 1.8 hard returns — usually gives a 
more balanced look. 


What is a language kit and where do | get 
one from? 


A language kit is a set of utilities and tweaks 

designed to allow you to use foreign alphabets 
and symbols on your European operating system 
(specifically on the Mac). The actual contents vary 
from language to language, but typical packages will 
give you new fonts, keyboard layouts and shortcuts, 


and the ability to use a standard keyboard to produce 
non-European letters by typing syllables. 

Language kits are available for almost every 
language, and the best way to find them is to search 
the Net because they’re usually put together by people 
interested in a particular language. Some are 
freeware, others can cost upwards of $150 depending 
on their features and rarity. 


What is the difference between TrueType 
and PostScript fonts? 


PostScript came first. It was created by Adobe, 

and adopted by Apple in 1985 as a way to create 
fonts that could be scaled up or down without losing 
clarity. With the introduction of scalable fonts, desktop 
publishing became much more accessible, and a 
revolution in print was born. 

However, Adobe kept the exact secrets behind 
PostScript close to its chest, and Apple and Microsoft 
realised they needed an alternative that could be 
used freely by everyone. Apple developed it and called 
it TrueType. Microsoft obtained TrueType as part of a 
deal giving Apple access to Microsoft's (rather poor) 
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dumps over the lazy dog. 1224, 
The quick brown fox jumps over the lazi 


The quick broum fox jumps ovet 
The quick brown fox jump 


TrueType and PostScript fonts are different ways of achieving a 
typeface that will look the same however it’s scaled. 


The duick broum £ 


PostScript clone. This forced Adobe to make 
PostScript more widely available (so that it wasn't 
swamped by TrueType). 

Today, PostScript and TrueType fonts are pretty 
much interchangeable for most people. There are 
technical differences, but for most of us, they amount 
to very little. 


Can fonts be converted from one format 
to another? 


Some applications and printers work with 
A certain font formats and not with others. 
Commercial programs designed to convert between 
different font formats are available. However, their 
results are never perfect, and they're often 
unsatisfactory. The problem is that scalable fonts use 


‘hints’, which are manually added tweaks that tell the 
font what shape it should try to follow when it’s scaled 
up or down. These are difficult to translate between 
formats, so automatic hints have to be provided by 
the conversion software. The software is getting 
better, but automatic hinting stillisn't as good as the 
manual original. 


& What is Opentype? 


Opentype is an attempted solution to the two 

previous questions. Microsoft and Adobe are 
finally getting together to hammer out a format that 
will replace TrueType and PostScript. The idea being 
that all programs and all printers should be able to use 
the same fonts, and nobody should end up finding half 
their fonts don't work in one program, and the other 
half don't work in another. Opentype has been around 
since 2000 (it was announced in 1997), but it hasn't yet 
revolutionised the industry, and it remains to be seen 
whether the idea does solve all our compatibility 
problems, or whether we just end up with a third 


competing format. > 


Glossary 


Headline Usually the most prominent element of type 
ina piece of printing. It attracts the reader to read 
further or summarises at a glance the content of the 
copy that it accompanies. 


Italic Type in which the letters are obliqued. 
Cursive typestyles are usually italic, but not all italics 
are cursive. 


Leg The bottom diagonal on the upper and lowercase k. 


Ligature Two or more characters linked together as a 
single glyph. 


Link A stroke connecting the upper bowl and lower 
loop of the lowercase g. 


Lightface A lighter version of a standard weight of 
the typeface. 


Lining Figures Numerals the same height as the 
capitals in any given typeface: 1, 2,3, 4,5, 6,7,8, 9,0. 
Lining figures align on the baseline. Also called 
‘uppercase figures’. 


Loop The lower portion of the lowercase Roman g. 


Lowercase Small letters. The term is derived from 
hand composition of metal type. When type was set by 
hand, two cases were used to hold the individual 
pieces of metal type, with one case arranged higher 
than the other. The capitals were kept in the ‘upper 
case’ and the small letters in the ‘lower case’. 


Lowercase Numbers Numerals that vary in size, some 
having ascenders, and other descenders. These 
numbers normally correspond to lowercase 
proportions. Also called ‘oldstyle numbers’. 


Oldstyle Figures Numerals that vary in size, some 
having ascenders, and other descenders. These 
numbers normally correspond to lowercase 
proportions. Also called ‘lowercase numbers’. 


Roman 

Name often applied to the Latin alphabet as it is used 
in English and European languages. Also used to 
identify upright, as opposed to italic or cursive, 
alphabet designs. 


Sans Serif Typestyles without serifs. 


Script Type designer to suggest handwriting or writing 
with a brush. 


Serif A line crossing the main strokes of a character. 
There are many varieties. 


Shoulder The curved stroke emitting from a stem. 
Small Caps Letters the approximate size of lowercase 
x-height characters, but in the design of the capitals. 


Normally available in text typeface designs only. 


Spine Main curved stroke of the capital and 
lowercase s. 
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Glossary 


Spur A small projection from a stroke. 


Stem A vertical or diagonal stroke. 
Stress The direction of thickening ina curved stroke. 
Swash Letters Characters with fancy flourishes. 


Tail The part of a Q that makes it look different to an O, 
orthe diagonal stroke of the R that makes it look 
differenttoaP 


Terminal The end of a stroke not terminated with a serif. 


Text The body copy in a book or on a page, as distinct 
from the headings. 


Text Type Main body type, usually smaller in size than 
14 point. 


‘Typeface One of the variations of styles in a typeface 
family, such as roman, italic, bold, ultra, condensed, 
expanded, outline, contour, etc. 


Type Family A range of typeface designs that are all 
variations of one basic style of alphabet. The usual 
components of a type family are roman, italic, and 
bold. These can also include variations in width 
(condensed or extended) and in weight (light to extra 
bold). Some families have many styles. 


Uppercase Capitals; see ‘Lowercase. 


Uppercase Numbers Numerals the same height as the 
capitals in any given typeface: 1, 2,3, 4,5, 6,78, 9,0. 
Uppercase figures align on the baseline. Also called 
‘Lining figures’. 


x-height The height of lowercase characters excluding 
ascenders and descenders. Based on the height of the 
lowercase x. 
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Why does everyone use Times New Roman 
or Arial on Websites? 


Is it because they're more readable, or because 
A they look good? No. It’s because if you use 
anything else, you can't guarantee that the people 
looking at your site will have the same fonts installed 
that you have. If the browser's system finds you've used 
a font it doesn't have, it’ll make a guess, and substitute 
one. The result is that you lose control of the way your 
Website looks. If you use something like Comic Sans 
Serif, you can be pretty sure most people will have it, 
but you can't guarantee it. The only way around using 
the fonts Microsoft has given us is to make images of 
all your text, or use a format that embeds the font in 
your content (like Shockwave, PDF, or Flash). 


Why would anyone pay for a font when so 
many of them are free? 


The short answer is: exclusivity. Many corporate 

images are strongly tied up with typefaces. Coca- 
Cola’s curly font is recognised the world over, and the 
words ‘Star Trek’ can only really be written with one 
typeface. If you shell out for a specific design of your 
own, nobody else will use it and you can establish an 
identity simply by the shape of your lettering. If you 
pay for an off-the-shelf font then others may be using 
it; but the more you pay, the more exclusive the 
typeface will be. 

Of course, even when you're not paying for your 
fonts, you usually are. The price of Arial, or Times New 
Roman, is paid when you buy your operating system or 
whatever other software they come bundled with. You 
may not notice it, but many of your fonts are paid for. 
Others really are free, and are available for download 
over the Internet — although, of course, it’s hard to be 
sure whether they’re actually freeware or not. 


If | want someone to design a font for me, 
what information do | need to give them? 


The most important thing is to let the designer 

know where the font will be used. A font for two- 
word headlines, logos, etc. can be as fancy and 
outlandish as you like. One designed for large bodies 
of text needs to be simple and readable. Will the font 
be very small, or very large? WilLit need to be a piece 
of art in itself, or simply a recognisable shape? 

After that, try to offer more general influences. Think 
of fonts you like, and those you dont, but avoid telling 
the designer you want something “like Times, but 
different”. Think about what you want the font to say: is 
it to be traditional, futuristic, simple or ornate? 

At the end of the day, you can be as specific or as 
general as you like, but the more information you can 
give, the more likely you are to get what you want. 


Q Can you copyright a font? 


Inthe US, scalable fonts are copyrightable, but 

bitmap ones aren't. In the UK, typefaces of all 
kinds are protected, although protection is not 
complete and is a long way from being practically 
enforceable. 

If your font isn't protected, it can sometimes be 
argued that the fact that it’s done on a computer 
means it’s digital data and is protected in the same 
way that a program is. 

The name of your typeface is a trademark, so it's 
protected automatically. However, that doesn't imply 
protection of the artistic work involved in creating the 
lettering. You can calla typeface ‘Roman Time’ but 
not ‘Times Roman’. 


Ga What does ‘Lorem ipsum dolor’ mean? 


It means nothing (or nothing to most people), 

which is actually the whole point. Putting up a 
body of text is the best way to judge how a font looks in 
use. However, it’s been found that if you put up any 
recognisable text, people will read it instead of looking 
at the font. ‘Lorem ipsum dolor is the first line of a 
standard paragraph of text often used to check out the 
look of a font. 

Curiously, the dummy text has been in use since the 
1500s and has remained pretty much unchanged 
since. It’s actually a corrupted version of a Latin text on 
ethics written in 45BC. EE 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua, At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel 
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. 


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ¢a commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi. 


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 


‘Lorem ipsum dolor...’ is a page of example text that’s often 
used to check out the look of a font without becoming distracted 
by reading the words themselves. 


Technical skills 


Improve yourtechnical skills with our in-depth section on perfecting 
the way you use typography within popular software packages 


66 Realistic type effects 


Curving and stretching pictures is easy but when it 
comes to making type look realistic after 
manipulation is more difficult. Ryan Shelton, from 
BD4D, shows you a few Photoshop type tricks 


70 Master perfect web type 


Using different fonts on your website can be difficult 
if you have no means of controlling how that font 
looks on every page. With TopStyle Pro (our full 
software on this month’s disc) you can do just that 
using Cascading Style Sheets 


76 Manage 100s of fonts 


If you're a bit of a font fiend and have 100s of the 
things milling around on your Mac or PC, then you'll 
know how difficult it is to find the right one when you 
need it. Suitcase, is a program that solves this 
problem. Chris Schmidt looks at what it can do 


80 A quick font using shapes 


Identikal are famous for their fonts that fly in the face 
of type tradition. Here Nick Hayes shows you how 
simple it is to create a quick font just by throwing a 
few shapes together. Here he uses Macromedia 
Fontographer to create the font 
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Tutorial Cool type effects with Photoshop filters 


Want your type effects to stand out from the crowd? Then create raised 
type using Adobe Photoshop's built-in filters and, using the latest version 
of this great piece of software, apply Layer Styles to editable text... 


[ hotoshop has come a long layers were in their day. In the latest | ability to be edited. Patterns have been a 

; way since its days as purely a version, Layer Styles can be added to text part of Photoshop’s arsenal for a long time, 
fy photo-correctional while remaining editable, which will and we'll show you how to add a pattern to 

\ application. The addition of make things much easier and give you the type to give it a more textured feel. 
layers was a huge step forward and has more flexibility to be creative. | The final step deals with applying the 
seen the program go from strength to Many effects can be created using type created to a chocolate bar wrapper 
strength. The uses for Photoshop are Photoshop's built-in filters and, in this and playing with layer colour modes to 
almost endless, from creating complex tutorial, you'll use the Lighting Effects | achieve a realistic-looking package. 

high resolution images and illustrations filter to create raised type effects. | While Photoshop still isn't perfect, it’s one 
to Web graphics and visuals. The recent | Unfortunately, applying these more of the best image-editing programs on the 
addition of editable type was welcome complex effects to type still means that it market and is easy to use with Adobe's 


: . Py | « F; : 
and was almost as big a step forward as has to be rasterized and therefore losesits | suite of other applications. 


Part 1: Creating raised type 


Make your text stand out using Photoshop's Lighting Effects filter... 


Fading interests 


Creating the fades on the 
channel used by the Lighting 
Effects filter is the most 
important stage in producing 
raised type. When applying the 
second Gaussian Blur, slide the 
Radius marker up until dark 
patches appear around the 
edges of the type, without filling 


it in completely. 


Here's one we 
made earlier 


Place the FUEL Lighting Effects 
preset, which can be found on the 
cover CD, into the following 
folder: Adobe Photoshop 7>Plug- 
ins>Filters>Lighting Styles. 


Color indicates: 


@ Mashed Areas 
O Selected Areas 


0 Create a new document (7cm x 4cm, 300dpi) 
with a white background. Next, make a new 
channel from the Channels palette 


tr Select the Type Mask tool from the Tools 
palette and enter the text ‘FUEL’ on to the 
canvas. We've used Arial Black at 60 points, with 
Anti-aliasing set to none. Use the Marquee tool to 
move the type mask into a more central place on 
the canvas. 


Fill the selection with white (Edit>Fill) and 


following steps you're going to manipulate one of 
the channels for use with the Lighting Effects filter 


while keeping the Type channel you've just created 


intact for later use 


deselect the selection (Select>Deselect). In the 


Cawssian Be 


With the Alpha 1 channel selected, choose 

Filter>Blur>Gaussian Blur and change the 
Radius to 3 pixels. Now load the selection of the 
Alpha 1 channel (Select>Load Selection...) 


This is the channel you'll use to create the 
raised type effect using the Lighting Effects 
filter. Click on the composite channel, load the 
selection of the Type channel (shortcuts: 
Command-click the Type channel for MacOS, 
Control-click the Type channel for Windows) 
Expand the selection by 15 pixels 
(Select>Modify>Expand). 


8 | Smooth the expanded selection by 6 pixels to 
get rid of the small spaces between the letters 
and make the letters slightly more rounded. Save 
this new selection to create a third channel called 
Type Expanded. Choose a foreground colour and fill 
the selection with it - we used OC, 50M, 100Y, OK. 


Once you're happy with its position, save the 
selection (Save>Save Selection). In the dialog 


box that pops up, enter the name ‘Type’ for the new 
channel you're creating 


G Blur dialog box by selecting Filter>Blur> 
Gaussian Blur (or use the shortcut Command- 
Option-F for MacOS, Control-Alt-F for Windows) 
This time, increase the Radius to 20 pixels 


With Alpha 1 selected, bring back the Gaussian 


To create the raised type effect, choose 

Filter>Render>Lighting Effects. In the dialog 
box that pops up, add the Alpha 1 channel to the 
Texture Channel and then play around with the 
settings. Alternatively, load the FUEL effect saved 
on the CD. When you're happy, click OK. 
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Tutorial Cool type effects with Photoshop filters 


Part 2: Adding textures and more type 


Using Layer Styles to add effects to editable text... 


Editable type 


You can use the Layer Styles to 
add loads of effects to type, and 
the best thing about this is that 
it's still editable! 


Handy shortcut 


Loading the selection of multiple 
layers can be done by 
Command-clicking the first layer 
(Control-click for Windows) and 
then Command-Shift-clicking 
any subsequent layers (Control- 
Shift-click for Windows). 


rt | You're now going to add a textured pattern to 
the type. First, create a new layer in the Layers 
palette. Then choose Edit>Fill. In the dialog box that 
pops up, select the Herringbone 2 pattern (or make 
a pattern of your own). 


4 | Use the Move tool to move the type into place 
under the FUEL text. Add a glow to the type 
by choosing Layer>Layer Style>Inner Glow. Play 
around with the settings to achieve a slight glow 
around the inside of the type using a light, bright 
yellow (OC, 10M, 100Y, OK) and changing the 
Blend Mode to Lighten. Click OK when you're 
happy with the settings. 


Overlay the new pattern onto the underlying 

type, set the blending mode for the patterned 
layer in the Layers palette to Soft Light and change 
the opacity to 60 per cent. The type now looks like it 
has a texture to it. 


G It's time to get the artwork onto a single 

layer that you'll be able to manipulate. First, 
make a channel that includes all the type. Load the 
selection of the layer containing GET THOSE 
CREATIVE JUICES FLOWING and then add the 
Type Expanded channel to that selection by clicking 
the Add to Selection radio button in the Load 
Selection dialog box. 


Now add the text underneath FUEL. Choose 
the Type tool from the Tools palette and type 


GET THOSE CREATIVE JUICES FLOWING making 
sure that the foreground colour is set to the same 
values as used to fill ‘FUEL’ in step 8. We used 
Arial Black at 8 points and set the tracking to -40 
in the Character palette. 


VE JUICES FLOWING 


G Save this new selection. Flatten the image 
(Layer>Flatten Image) so you'll be able to 
select all the artwork at once. Open the file 
chocolate_bar.psd from the CD and, with the 
Move tool selected, drag the complete type 
selection over to this file. 


Part 3: Wrapping things up 


Making your type look like part of the chocolate wrapper... 


rt | It's time to manipulate the type so that it 

looks like it’s part of the wrapper. Choose 
Select>Transform Selection and Command-drag 
(Control-drag windows) each of the corners into 
their respective positions. When you're happy with 
the position of the type, hit the Enter key or double- 
click in the middle of the type. 


For the type to look as much a part of the 

wrapper as possible, play around with the 
Blending Modes for the Type layer in the Layers 
palette. To achieve the best result, we set the 
Blending Mode for the Type layer to Colour and 
then duplicated the layer, changing the Blending 
Mode of this new layer to Overlay. 


Duplicate the Type layer a third time, this time 

changing the Blending Mode to Lighten and 
altering the layer's Opacity so that some of the 
highlights and shadows on the wrapper show 
through the type. EEE 
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Illustration: Thomas Brodahl [w] www.surfstation.lu [w] www.xtrapop.com 


<link rel="stylesheet" type="text/css" h 
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ee { font-family: "New Century Schoolggok" 
Ahover{ (i eh 
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Doing it with style 


Cascading Style Sheets keep Web typography consistent, but what if you 
don't know the difference between your <HEAD> and your <BODY> tags? 


ascading Style Sheets are now 
well established in the Web- 
| } authoring world as the most 

‘e efficient method of managing 
your HTML content. From control over the 
basic text formatting to more advanced 
methods of controlling layout elements, Style 
Sheets allow global control of a site through 
a single CSS document. 

Atits most basic, the logic dictates that a 
single style sheet can be linked to from all 
your site's files. This CSS file determines the 
characteristics of various standard HTML 
elements such as text and link attributes, 
meaning that if, for example, you wish to 
change the font face of your entire site, this 
needs only to be done through the CSS file. 

In practice, however, many designers are 
shy of the code beneath their Dreamweaver 
design views and continue to use the 
outdated <FONT> tag method. Keep reading 
and you'll soon figure out how to get your 
site's typography consistent and up to speed. 

Since HTML 4.0 and the introduction of 
CSS, many previous tags have been outdated 
in favour of Style Sheets. It’s now possible to 
create much more flexible results with 


various levels of emboldening text, for 
example, rather than using the previous 
on/off method. 


Style sheet basics 


There are three methods of integrating CSS 
commands into your work: they can be 
embedded inline to specific HTML tags; 
determined within the <HEAD> of a 
document; or, the most effective and 
commonly used method, linked to a 
separate CSS file. 

The latter method allows the most flexible 
control over your site’s typography and 
formatting as multiple pages can be 
controlled through one separate file, making 
global changes as simple as changing a 
single value on the CSS file. 

The basic CSS syntax is fairly 
straightforward: an HTML tag is referenced 
followed by the element and variable criteria 
it should inherit. For example, the following 
specifies that the text contained within the 
body and paragraph tags (separated in the 
code by a comma) should be rendered with a 
sans-serif font, namely Verdana in the first 


Which style sheet editor is for you? 


instance, which takes a hex value for its colour 
and has its size determined to 12 pixels. 


BODY, P { 

font-family: Verdana, Geneva, Arial, 
helvetica, sans-serif; 

color: #333333; 

font-size: 12px; 


} 


There will be occasions when you need to 
create individual rules for specific instances 
such as how to render a subheading. Defining 
an existing but lesser-used HTML tag such as 
a heading (for example, <H3>) might suffice 
but can be problematic as it might determine 
unwanted characteristics such as inserting 
hard returns before and after the instance. 

To get round this, CSS uses a system 
known as classes, which allows you to define 
custom-made elements preceded by a 
period. These can then be embedded directly 
into an existing tag surrounding your chosen 
object or included specifically through a 
<SPAN> tag with the class referenced. For 
example, the following code creates a class 
that we've named author to suit its purpose. > 


Macromedia Dreamweaver MX 
[w] www.macromedia.com/ 
software/dreamweaver/ 
Dreamweaver provides a range of 
pre-built style sheets that can be 
used as a starting point. The tools 
available to modify such files are 
comprehensive (although largely 
Wizard-based) leading to results 
that are effective. However, for 
more flexibility you might need to 
look under the bonnet and tweak 


things by hand. 


Adobe GoLive 6.0 

[w] www.adobe.com/ 
products/golive 

Like Dreamweaver, many of 
GoLive's CSS tools are aimed at 
designers with little or no 
knowledge of the full potential of 
CSS. Options are presented ina 
logical and contextual way that 
allows for effective control over 
your style sheets. Again, delving 
into the code might provide a little 


more control. 


TopStyle Pro 3.0 

[w] www. bradsoft.com/topstyle/ 
TopStyle Pro is one of the most 
effective dedicated CSS editors 
available. Developed by the same 
people who originally created 
HomeSite, this title offers the most 
control over the raw code by 
offering contextual options through 


a variety of palettes. 


Style Master 2.2 

[w] www.westciv.com/ 
style_master/ 

This is another dedicated CSS 
editor that offers specialist tools for 
creating and amending style sheet 
data. Style Master doesn't quite 
have the professional edge of 
TopStyle using an overly 
complicated tabbed approach to 


access components. 


Style Maker 1.4 

[w] www.danere.com/StyleMaker/ 
Acheaper and much more basic 
dedicated CSS editor, Style Maker 
allows fairly reasonable control 
over your style sheets. One of its 
main features is the ability to 

apply a style sheet directly to an 


existing site. 
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.author { 
color : #ff3300; 
font-size : 11px; 


} 


Assuming our style sheet has determined the 
appearance of the main paragraph <P> tag, 
we can override this just for the relevant 
details within the HTML of the actual page: 


<p>Brave New World<br> 
<span class="author’>Aldous 
Huxley</span></p> 


The code is much more efficient when 
compared with older methods of controlling 


formatting specifically within ALL 
surrounding tags. 

Although understanding the full potential 
of CSS commands is an obvious advantage, 
many Web-authoring applications make this 
of secondary importance for the new user. All 
the major applications have tools for creating 
and modifying CSS files, which provide 
logical and contextual options depending on 
the chosen tag. 

However, for the more experienced coder, 
using a program like Dreamweaver or GoLive 
is fine for getting the basics established, but 
when it comes down to the ultimate control 
over your CSS code, it’s often best to turn to 
dedicated tools such as TopStyle. 


The following tutorial uses Dreamweaver 
to link and work ona basic style sheet with an 
existing HTML document; we then take this 
into TopStyle Pro so you can see how much 
more control is possible through such a 
dedicated editor. 


TOP TIPS: MAKE PERFECT WEB TYPE 


A Web page's source code enables you to look at 


reliant style sheets by making a note of where the CSS 
link in the <HEAD> of the HTML points to and entering 


this location into your browser. You can then see how a 


particular site manages its typography through CSS 
directly and pick up some useful tips along the way for 


creating and modifying your own. 


Using CSS, you can modify the generic appearance of 


HTML forms to integrate their appearance with your 
site design. However, in the interests of usability, be 


If you’re unsure about how different font sizes might be 
rendered depending on browser/version/ platform 
combinations, try using a relative percentage value to 
determine sizes to compare with your primary value. 


Fixing backgrounds so they don't scroll with the page is 
more cross-browser compatible through style sheets 
in preference to including outdated comparable 


careful to keep these elements identifiable. 


commands within the HTML body. 


Similarly you can change the way your browser 
scrollbars appear to also match your site design. Each 
aspect of the scrollbar can be affected individually 


making some unique results possible. 


If you prefer the amount of control available through a 
dedicated application such as TopStyle, you can 
configure Dreamweaverto work in that environment by 
default through the Edit>Preferences and File 

Types/ Editors options. 


To use CSS for determining the colour, rollover colour 

and underline properties of your links, you'll need to 
recognise the different link states: ‘Link’ for unvisited 

links, ‘Visited’ for pages already viewed, ‘Active’ for T 


when the link is actually clicked, and ‘Hover’ for when 
the mouse is held over the link. Setting text- 


Browser support is crucial for the correct rendering of 
your pages, so make sure you test your results on all 
the major titles and versions to mark any potential 
problems. The most reliable minimum versions being 
IE 5.0 (Mac), IE 5.5 (Win), Netscape Navigator 6.0 and 
Opera 4.0. 

decoration to none will remove the default underline. 


If you’re hand-coding your HTML, get into the habit of 


closing your tags. Although you can get away with 
omitting tags such as the closing paragraph </P>, 


_ Tomake sure your code is compliant with standards 
and to ensure the occurrence of errors is minimised, 
you might want to run your site through online 

validators provided by the W3C at 
[w] http://validatorw3.org/, or the WDG at 


[w] http://www.htmlhelp.com/tools/csscheck/. 


these can prove to be crucial when CSS is involved. 


Part 1: Getting started with CSS in Dreamweaver 


If you're new to style sheets, here's how you get started from within your main production tool... 


Converting to CSS 


You can easily migrate yoursite 
tousing CSS through 
Dreamweaver by opening any 
HTML file and accessing the 
source code. Right-click 
(Windows) or Ctrl-Click (Mac) to 
access the contextual menu that 
provides the option to Find and 
Replace. Set this to search 
throughout the entire current site 
for all instances of the FONT tag 
with the action to strip the tag. 
You can now configure your style 
sheet to take over any common 
elements and create class 
attributes for any specific 
features. It might take a while, 
but your site will be much more 
flexible after conversion. 


Help from O'Reilly 


\n Dreamweaver's reference 
palette you'll find information on 
Cascading Style Sheets from 
publishers O'Reilly. This is a 
useful tool for determining 
exactly what is possible in 
different situations, figuring out 
how compatible your style sheet 
will be with various browsers, 
the correct syntax with examples 
and Object Model Reference, 
and more. 


Paragraph paragraph, paragraph ¢ 
Saragraph paragraphi 


expanded 


‘A style sheet that iedefines several body 
‘elements to use Avia and adds a few 
‘custom text classes. 


a Dreamweaver MX provides a range of 
predefined style sheets that can be used to get 
started. Go to File>New and select the General tab 
in the New Document box. Choose CSS Style Sheets 
from the category list and click through the available 
options for a preview. 


4 | To further edit the style sheet, use the 
Text>CSS Styles menu again or the icons 
arranged toward the bottom of the CSS Styles 
panel. This prompts you to choose any individual 
linked or embedded CSS elements directly. 


IEEE 


<2 colspane"S' 
</t> 
<tr> 


For demonstration purposes, select one and 
save this to your site providing a .css 
extension. Remove any existing <FONT> tags (see 
‘Converting to CSS') from the HTML files you want 
to associate the style sheet through (Text>CSS 
Styles>Attach) and locate your saved CSS file. 


You can either select an existing rule or create 

anew one to edit through the Style Definition 
options. Use the categories to the left to browse 
through the main elements and amend any 
definitions through the available options to the 
right. Click OK when you're done. 


If you now access the CSS Styles panel under 

the Design palette, any additional Class 
commands will be visible with the Apply Styles radio 
button selected, while toggling over to the Edit 
Styles options lists a summary of all commands plus 
their attributes. 
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Although tags automatically inherit defined 

CSS controls, class attributes need to be 
associated manually. Drag a selection of text and 
click the relevant option from the CSS Styles panel 
with the Apply Styles option checked. This will 
either surround the selection with a <SPAN> tag or 
embed the class into an existing tag. 


Part 2: Controlling type with TopStyle 


Dreamweaver's Wizard-based interface is good, but you can't beat getting dirty with the code... 
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1 | Copy the index.htm and style.css files from the 
CD to your hard drive and define a site within 
Dreamweaver. Open the index.htm file to view a 
simple but uninspiring page layout; notice the lack 
of any apparent formatting with the default font 
face attributes being used. 


& We've already created a basic style sheet in the 
2 

form of style.css, to which you can create a 
link using the process explained previously. Notice 
the instant change to the typography with only this 
simple action, as the HTML file inherits the 
attributes set by the style sheet. 
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Open Dreamweaver’s Preferences via 

Edit>Preferences and choose the File 
Types/Editors category. Scroll through the 
extensions adding a .css entry if necessary; select 
this and click the + symbol above Editors, Find and 
select TopStyle clicking the Make Primary button. > 
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Controlling type with TopStyle continued... 


Understanding 
the DOM 


To bypass many basic problems 
experienced by designers when 
working with CSS for the first 
time, it’s important to understand 
the basic idea behind the 
Document Object Model (DOM). 
For example, you may think that 
by defining your font attributes 
within the <BODY> or paragraph 
<P> tags of aCSS will affect 
your pages’ text. This will work, 
but, due to the nature of Web 
authoring, most pages are based 
around tables so you'll 
undoubtedly need to configure 
the table cell tag <ID> to inherit 
such detail too. 


Getting more out of 
TopStyle Pro 


TopStyle is much more than a 
mere CSS editor. The left-hand 
View Barenables TopStyle's 
different views, which include 
working in Edit mode or running 
reports on any configured sites 
Secondary items canalso be 
accessed, including lists of your 
sites, images previews and links 
to external related sites that may 
be of interest. 
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megan aliquam erat volutsat. 


We've now associated TopStyle as being our 

default editor for CSS files from within 
Dreamweaver allowing us roundtrip editing. Toggle 
over to the Edit Styles option in Dreamweaver's CSS 
Style's panel and double-click an entry or use the 
Edit Style Sheet button to launch TopStyle. 
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Next we'll amend the CSS file to justify the text. 

Access Dreamweaver's CSS Styles palette in Edit 
Styles mode and double-click the body, p, td 
reference to launch TopStyle. Create a new line at the 
end of this entry and define text-align: justify. Save 
and return to Dreamweaver to see your changes. 
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“ilink, aivisitea { 
color: #666666; 
vemt-decoration: none; 
) 


Classes 


atlin, aivisited ( 
color: #000000; 
text-decoration: 
J 


athover { 
color: #666666; 
text-decoration: underline; 
} 
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body, p, td { 


Run through the last two steps again, creating 

selectors for a:hover with the same colour but 
adding the underline to the text decoration for 
when the mouse is over the link, and then for 
a:active creating a colour change to black 
(#000000) with an underline giving the link 
highlighting effect when clicked. 


“A 


TopStyle is divided into a number of areas, the 
raw CSS dominating the centre of the 
interface. Highlight a random attribute and notice 
that the Style Inspector to the right updates to 
reflect your choice. The bottom of the interface 
provides a preview of how your CSS amendments 
affect the generated page. 


CSS can also make default links considerably 

more interesting. Back in TopStyle click the New 
CSS Selector icon at the head of the CSS Selectors 
pane. Click the Advanced option in the Wizard that 
appears and select the ‘a’ (Anchor) HTML element 
and the :link Pseudo Class. Include this on your 
Current Selectors list through the Add button. 
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11 You can get some idea of the effect through 

TopStyle’s preview pane at the bottom of the 
interface, although this should only be used as a 
working guide. Always check your results in the 
browser (at least MS IE and Netscape) to confirm 
any style sheet commands. 
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6 | We've already included many of the CSS 
references within the index.htm file to save 
time, but so you understand how to include such 
references head back to Dreamweaver, select the 
author name in the right margin and click the pre- 
defined author class from the CSS Styles palette. 


“ailink, aivisited ( 
eplor: #666666; 
text-decoration: none: 
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body, p, td { 
color: #333333; 
font-family: georgia, palating 
font-size: l2px; 


TEE 


9 | Also include the :visited Pseudo Class so you 
list two selectors and click OK. Using either the 
contextual options available or the Style Inspector 
list define this with colour: #666666; and text- 
decoration: none; to determine the colour of the link 
and remove the default underline. 
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The end result is a drastic improvement on the 
original file. We could have used outdated 
<FONT> commands, but this would have ultimately 

bloated the final code and resulted in a site whose 
typography was extremely time-consuming to 
amend, each file having to be amended individually 
without CSS. FEES 


[to lopStyle Pro 3.0] 


Computer Arts Special readers can upgrade to TopStyle 3.0 for just £17 (normally sold for $79.95) 
by visiting the special offer page at www.qbssoftware.com/topstyle or by calling 08456 580580... 


TopStyle Pro 3.0 features 


This price excludes shipping charges and VAT 


* HTML and XHTML editing - TopStyle comes into its 
own as a powerful HTML and XHTML editor. 


* Style Upgrade - Upgrade your HTML documents by 
replacing outdated markup with equivalent styling. 


Convert all of your<font> tags to CSS with a single click. 


* HTML Tidy - Validate and reformat your HTML with 
TopStyle’s new HTML Tidy integration. Includes a Tidy 
configuration that converts your HTML to XHTML 


- Editor Hyperlinking - Unique hyperlinking greatly 
simplifies navigating between documents. 


- Full Screen Preview - Display your HTML or CSS 
documents in a full-screen preview, which can be split 


between Internet Explorer and Mozilla (Netscape Gecko). 


- Related Styles - See at a glance which styles are 
related to the current HTML tag or CSS selector. 


- File Explorer - Easily navigate your local files and 
network connections, and create links with simple 
drag-and-drop actions 


* Clip Library - Store your favourite code snippets ina 
central location for reuse. 


* Thumbnail Viewer - See all images in a specific folder 
with the new image thumbnail viewer. 


- Custom Keyboard Sets - Create sets of custom 
keyboard shortcuts that insert your favourite tags or 
other snippets 


- Custom Palettes - Create new colour palettes by 
importing existing palettes from Macromedia 
Fireworks, JASC PaintShop Pro, Adobe Photoshop 
(ACT format) and HomeSite. 


- Harmonious Colours - Create pleasing colour schemes 
for your style sheets and HTML documents with the new 
harmonious colours feature 


* TopStyle Blog ~ A blog (‘Web log’) is built into TopStyle 
Pro 3.0, providing daily links of interest to Web authors. 


- CSE HTML Validator Pro Integration - Users of CSE 
HTML Validator Pro can now access its HTML syntax 
checking from within TopStyle. 


€asy on your pocket 
from £3.50 
per year 


i oon CO 


ecommerce 
easy action 


webhosting 
easy service 
from £30.00 
_ per year 


The UK’s largest domain name registrar offers service, expertise 
and value for money - all backed with reliable, robust technology. 
Put our size and strength to work for you 


@peasyspace 


domain names - ecommerce - webhosting 
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If your fonts have become troublesome, try packing 
them away in suitcases... 


onts are a crucial part of the 
design process because the 
whole look and feel of a job 
can be determined solely by 
a typeface. As such, designers tend to 
have a habit of indiscriminately 
collecting fonts for use in current or 
future projects simply because they've 
seen them used elsewhere, anticipate 
using them in their own work, or just 
because they look good. 

Stocking up fonts in this manner can, 
and often does, lead to hundreds of fonts 
being stored and automatically loaded 
with the operating system when a 
computer boots up. This can have a 
detrimental effect on the performance 
of your computer as memory is 
needlessly wasted on fonts that are 
rarely, if ever, used. 

As wellas easing system resources, 
font management software allows you to 
organise fonts into categories depending 


on projects, clients or self-defined 
groups sharing common themes. This 
improves your chances of quickly finding 
the right font for new projects. 


Ported software 


Traditionally, the world of print and 
typography has been a preserve of the 
Macintosh platform, but as the PC has 
become more capable of handling 
PostScript fonts and graphics programs 
in general, more and more applications 
are finding ported versions. Despite this, 
the PC versions of both Adobe Type 
Manager Deluxe and Extensis Suitcase 
still lag behind their Mac equivalents. 
Unfortunately, the current version of 
ATM Deluxe does not support OS X nor 
are there any current plans for it to do so, 
although several high-end print 
applications, such as /nDesign, have 
built-in font management features, 


where fonts can be stored separately 
from system fonts. This goes some way to 
relieving the strain on your computer 
when handling typefaces — it can take 
care of local problems, although there 
are still issues to consider when using a 
network to, for example, make fonts 
available to other users. 

The following tutorial introduces you 
to the Suitcase Desktop Edition, the 
dominant font management software 
from Extensis, and looks at how to 
configure the software to optimise your 
computer's performance and organise 
your fonts in such a way that finding 
suitable fonts for new projects becomes 
a natural process. 

PC users should note that their version 
of Extensis is currently on version 9 while 
Mac users can enjoy version 10 with full 
OS X support, which includes numerous 
benefits such as automated font 
selection and plug-in support. However, 


Top tips: making Suitcase work for you 


Fonts that you want to manage 

using Suitcase must be removed 
from the system fonts folder, but 
remember NOT to remove essential 
system fonts for your platform or 
you'll experience performance 
problems. See the Suitcase help 
files for your particular platform. 


If you want Suitcase to 
2 remember fonts so that you 
can open or close them again at any 
time, add them by using the Add 
Fonts command on the Suitcase 
File menu, the Add button on the 
Suitcase Toolbar, or drag and drop 
them into the Suitcase Fonts pane 
or Sets pane from the Explorer. 


If you want Suitcase to forget 
3 fonts, so that they don't appear 
in the Suitcase Font Database after 
restart, add them using the Add 
Temporarily command on the 
Suitcase File menu, or drag and 
drop them onto the Suitcase 
application icon. Fonts added 
temporarily are displayed in red 
type on Suitcase font lists. 


PostScript fonts that are 

loaded in your printer may 
appear in applications but will not 
be displayed in Suitcase 9. Some 
applications’ font lists (especially 
Microsoft apps) show PS fonts that 
are stored in the printer's memory. 
These fonts show up in the 
application's font list even though 
they have never been added to 
Suitcase 9. 


To select fonts or sets 
5 contiguously, press the Shift 
key while selecting fonts and/or 
sets. To select fonts or sets non- 
contiguously, press the Ctrl (PC) 
or Option (Mac) key while 
selecting them. 


Fonts opened temporarily are 

listed in red type. To view a list 
of these fonts (if any), choose Show 
Temporary Fonts from the Suitcase 
View menu, or choose Temporary 
Fonts from the pop-up menu in the 
Suitcase Fonts pane. 


You can view the current list of 
7 closed (deactivated) fonts by 
choosing Show Closed Fonts from 
the Suitcase View menu, or by 
choosing Closed Fonts from the 
pop-up menu in the Fonts pane. 


To remove sets from the Sets 

window and at the same time 
remove those fonts from the 
Suitcase Fonts Database, select the 


desired sets, then hold the Shift key 


while pressing Delete or while 
clicking the Remove button. 


Double-clicking a font in 

either the Sets pane or Fonts 
pane will toggle the font status 
between inactive and the Default 
Activation setting chosen. 


Suitcase Network Edition is 
1 0 required to connect to 
Suitcase Server. If you're using 
Suitcase Desktop Edition, you 
won't be able to connect to 
Suitcase Server. 


the interface and operation of the software are 
otherwise virtually identical on both platforms. 

Automated font selection is definitely something for 
PC users to look forward to, because this allows 
individual documents to have fonts automatically 
associated and activated when opened. 


Communal fonts 

One feature that both platforms can enjoy with 
Suitcase is the more recent Server Edition, which 
provides multi-user environments, such as larger 


design agencies, to have common fonts stored and 
managed from a central server. The advantages of this 
are apparent when you consider that without such a 
feature, each and every computer would need fonts 
installed and updated individually to ensure 
consistency throughout a network. 

The Server Edition is as simple to use and configure 
as its desktop equivalent, which is essential when it 
comes round to font management. Such a feature 
should be intuitive for all users and present no 
problems when it comes round to installing fonts or 
detecting conflicts between typefaces used. 


Choosing the right font management software... 


You'll probably need to move non-essential fonts 
currently stored in your system font folder, because 
these are automatically controlled by the operating 
system. They can be stored elsewhere allowing 
Suitcase to retrieve specific combinations of fonts 
after they have been made available to the software. 
Refer to the Suitcase help files for system fonts that 
should not be removed for your particular platform. 

Once you’ve done this and have the software 
installed, you can continue with configuring the 
software and speeding up both your computer and 
your workflow. > 
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Part 1: Installing fonts with Suitcase 


Before you can feel the benefits of font management, you'll need to 
configure the software to recognise where your fonts are stored... 


Adding fonts 


When adding fonts and viewing a 
large list of fonts by font name, 
(as opposed to file name) froma 
single directory, you may need to 
wait a moment for the names to 
be recognised. This is a classic 
example of how a large quantity 
of fonts can slow down your 
system resources as your 
operating system catches up 
with your request. 


Font Sets 


As well as grouping fonts by 
project, for example, you might 
want to consider creating stylistic 
groups matching yourown 
definitions. This is particularly 
useful when searching fora 
certain type of font to match a 
new project. You could simply 
browse through your ‘hand- 
writing’ set, for example, to find 
something quickly that might 
be suitable. 


rere 


ezly 
TF Univewal ght Tea ype 
‘N UrivreaCorderved. take TusType 
We UriverssCorderaed, Bald like ThaT ye 
 UriveresCondeneed. Sd TuaTpe 
Te Unevernaiondenved Trlipe 
 UniveraCondBloch. le Thal ype 
vo f 


a If you've followed our top ten tips, you should 
already have moved your non-system fonts to 
free up processing resources. To allow Suitcase to 
find these non-essential fonts, simply drag and drop 
them into the Fonts pane located to the lower left of 
the Suitcase interface. 
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4 | The larger Preview pane to the right of the 
interface provides an area where you can 
compare fonts side-by-side before you activate 
them through four different preview modes. 


Fork Set ©) Nun 


=I <___ 6 fonts 
Univers Extended, Med... TrueType 


"] Univers Extended, Med... TrueType 
‘DH Univers Extended, Bold. 
WH Univers Extended, Bold 


TrueType 
TrueType 
TrueType 
TrueTyoe 


‘® Treettog 


‘F HalvettThin, ltalic 
‘Dy HalvettUtraCompressed. Bold 
Dr Handersint SF 


& Alternatively, if you've already specified a 
location where all your fonts have been stored, 
you can set the font pane to show All Fonts and 
drag them directly up to the required Font Set. 
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@ If you use the drop-down options above the 
font pane and select the All Fonts option, 
you'll see all the fonts listed. The appropriate icon in 
the status column can identify system fonts. 
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The toolbar contains icons for the most 

commonly used commands. These include 
creating new sets, the ability to add or remove 
fonts, and the colour-coded activation modes. 


8 | Once a Font Set has been defined, the preview 
pane displays a summary of the fonts included. 
You can alter the display mode and point size using 


the drop-down controls at the head of this, and even 


enter your own text using the QuickType option. 


‘® UrsaBrushSans 
'® Valium 
Venus Rising 


) 


The Font Set, or name pane, contained at the 

top left of the interface allows you to organise 
your fonts into sets by project or client or whatever 
else you prefer. Sets can be easily activated or 
deactivated giving you access to the fonts you need 
as you need them. 


To create a new Font Set click the New Set icon 

in the toolbar and provide a suitable name for 
the purpose of your custom set. Add fonts by 
selecting a Font Set and clicking the Add Font icon 
to locate the required font. 


‘Wh Univers Extended, Med. 
Th Univers Extended, Med. 
“Hh Univers Extended, Bold... 


"Univers Extended. Bold 
2 


- Similarly, you can expand the Font Set title to 
display the individual font names under the 
group title. From here you can select individual fonts 
directly for viewing or activating. 


Part 2: Managing fonts within Suitcase 


Now you've got Suitcase configured, you need to find out how to make the 
most of its management features... 


Changing status 


Using the direct approach to 
change the activation settings of 
a font will only lead to two 
default actions: fonts in either 
permanent or temporary mode 


‘®] Univers Extended, Med... 


can be removed while those 


& &F chent - Brodsky Quartet 


' Univers Extended, Med 
unassigned can only be given ‘WH Univers Extended, Bold 
temporary status. Holding down ‘Hp Univers Extended, Bold 


: ‘ Treeftog 
the Control (Win) or Alt (Mac) °@Y client - SoundCircus 


EP Foundry Form Sans, Italic 
‘FE Foundry Form Sans, Bold 
‘Foundry Form Sans 

+9 Ads 
keys changes this so that 2 
temporary and unassigned fonts 
Russel Write TT 
Rockwell. Italic 


‘H Zombie, A 


can be made permanent while ‘BH ZeroHour 


permanent fonts are relegated to ® Vikatu 
temporary status. o There's no need to quit applications or restart pee Son Wine Take 
your computer when activating or deactivating B The green icon permanently activates fonts, 3 The yellow icon assigns a temporary status to a 
fonts. Suitcase allows a font to be in one of three making them available all the time even after a font. When this is associated with a set, the 
modes through the green, yellow and red buttons restart. To make a Font Set permanently available, related fonts are made instantly available to your 
contained in the toolbar. simply select it and click the green icon. system but will be removed automatically on restart. 


& & track5 5 fonts 

© & client - SoundCircus 2 fonts 
‘® Verdict SF, Bold TrueType 
‘FH Abadi MT Condensed L... TrueType 

| & client - Brodsky Quartet 3 fonts 
‘By Foundry Form Sans, Italic TrueType 
‘FH Foundry Form Sans. Bold TrueTvoe 


H Foundry Form Sans, italic 
B® Foundy Form Sans, Bold 


W x SCOUTS ) 5 fonts 
Ch | tad eres li bt Forts & client - SoundCircus 2 fonts 
: }@ TF GilSans W Verdict SF, Bold TrueType 
a GeoType A Abadi MT Condensed L... TrueType 
— | @ [0] Georgia, Italic ©) & client - Brodsky Quartet 3 fonts 
jo cara pecee was | & [0) Georgia, Bold Italic ‘Bp Foundy Form Sans, Italic TrueType 
) © "% Foundry Form Sans, Bold i § ®@ [0] Georgia, Bold WH Foundry Form Sans, Bold TrueTyoe 
| © FH Foundry Form Sans y ‘Ty Georgia Ref jl 
| '® Fote | 
"Fh Footlight MT Light | Suitcase 3 Fonts. 
Bh Font Nowa, @ F GilSans TrueType 
F Geolype TrueType 
———$$$$_________ a Although we've relocated all non-system fonts | ® g Georgia, Italic Open ype 
ov Meanwhile, the red icon deactivates a font to minimise resources, there may well be fonts 2-10} Goria, Bold Italic OpenType 
from those currently available. Notice the you would like to have permanently available that A more direct method of changing a font's 
coloured icon located in the left column of both the need not necessarily be placed within a specific Font status can be applied by passing the cursor over 
Font Set and Font Name panes — this mirrors a Font Set. The same principle can be applied to individual the status column. You'll notice the mouse prompts a 
Set's status. fonts in the Font Name list directly. new status depending on a font's current activation. 


Part 3: Mac-specific features 


After looking at general cross-platform configuration issues, here are a few 
features specific to the Mac... 


Removing 
temporary fonts 


When working with temporary 


SUITCASE 


fonts ona Mac, you'll 
undoubtedly want to remove 
them when the task has been 


completed. Simply hit the 
Command-Comma keys to 
automatically remove any such 


Dpen Suitcase Application 


temporary fonts. 


client - brodsky quartet 
client - SoundCircus 
Ads 


If you receive many fonts daily to your Mac, The newly activated fonts are displayed in red 

you can use the Activate on Demand feature to indicate their status. Suitcase will gy For more instant results, you can quickly 
to add and activate fonts temporarily. Select your automatically resolve any font conflicts by allowing activate and deactivate sets without opening 
fonts and, while holding the Command/Apple key, these job fonts to override any other fonts with the Suitcase by using the Suitcase Strip on the Apple 
drag them into the Fonts pane. same name. Control Strip. FEES 
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@ Font design using shapes 


You can make a graffiti stencil typeface using just three simple shapes. 


ilustration and expertise Then you can streamline it in Fontographer, and produce original artwork 
provided by Nick Hayes of F P “ 
identikal. Contact Nick at using the typeface as a base and the three shapes as graphic objects... 
fe] nick@identikal.com, 
The art of graffiti is to Using three different shapes as a illustrate a three-colour dub piece. The 
produce work that gets basis, we demonstrate how you can beauty of producing simple shapes is 
Files on disc noticed by your rivals and produce an original looking typeface that you can use them ona machine to 
You'll find the files to support the public. But at the same that can not only be used to work out your artworks, then later use 
this tutorial on the CD in the time it must be original, co-ordinated communicate a message, but can also them as stencils to produce artwork on 
Tutortal\Graffiti folder. and, most importantly, quick to produce. look pleasing to the eye when used to canvas or even walls (within the Law!). 
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Part 1: Simple shape building 


The key to a successful graffiti font is all in the preparation. In this section, we show you 
how to keep it simple, clear and easy to reproduce the western alphabet glyphs... 


Simplicity i QU 
Keep things simple; the more 
complicated you make your 
shapes, the harder itis to get the 
whole western alphabet glyphs 
out of them, If you're looking to 
use these as stencils for ‘live’ 
graffiti pieces, the simpler they 


are, the easier the shapes will 


apply to the wall. Remember that 


speed is a very important 


weapon to the graffiti artist — the 


ioncira pisca takes Baton rs 43 Start your typeface by drawing out the three 


First, produce a circular shape that's equal to o The second shape is a rectangle. This rectangle 


higherthe Heko sating eauchd shapes you feel will make the full set of 2 | 
r: western alphabet glyphs. Once you've got three 90 degrees. This shape will help construct the should be the same thickness and height as the 
shapes you think will work, produce them in your base of each character, where the other two shapes circular shape. Again, this will form the basis of each 


desired vector program will stem from character, but it'll also add stability to them all 


4 | The third and final shape of the three is a 
rectangular shape with a 45 degree right-angle 
on the bottom of it. It's slightly smaller that the 
others, but will be the ‘personality’ shape. It'll add 
stylistic elements to the base shapes, which will give 
your typeface an original look. 


Now you have all your shapes accurately 

drawn, you can start to produce each glyph of 
the western alphabet. Use the ‘outline’ screen of the 
vector program you're using, so that you can see 
how each shape is being formed. 


5 | Stick your shapes together accurately on a 
baseline. These are the primary elements of 
your typeface, and should therefore be placed in a 
position where you can easily copy and paste each 
one of them to start producing your font. 


8 | If you've been using the ‘outline’ screen of 
your vector program, you'll need to join all of 
the shapes within each glyph to make the character 


one full shape. You'll need to do this in order for the 


font to work properly once in Fontographer. 


G Draw up a grid for your typeface; this helps you 
work out the ascenders and descenders and the 
baseline. It doesn't need to be complex, especially as 
you're only producing a ‘stencil graffiti’ font. 


rg ie | 
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g Once you've produced all the glyphs that you 
need (you'll use only 37 for this tutorial), you 
should accurately place them on a baseline with 
around 13 characters to a line. This helps you move 
on to the next stage. 


Part 2: Streamline your font 


Drawing a typeface is one thing, but actually producing one for use is another. We show 
you the best and easiest ways to get your font working... 


Colour is the key 


Restrict yourself when it comes 
to colour. Imagine that you really 
are going to spray these shapes 
onto a wall. Spray paint is 
expensive, so always think of 
using a dark colour alongside a 
light one (this is called a ‘dub’ 
piece), then if you need to 
highlight various shapes, add 
another colour that brings life to 
the artwork. If you're looking to 
get noticed, try to be original 
when picking your colours; ‘dub’ 
pieces are usually produced with 
reds, silvers and blacks, so try 
something different. 


Now save an individual file of all the character 

glyphs together. This is a backup file in case 
you need to go back and use the layout again. As 
this tutorial goes on, it'll become apparent why you 
need to do this! 


4 | Once you've opened Fontographer, begin by 
selecting a new font. This automatically sets up 
an empty character file. Highlighting the uppercase 
‘A’ box, import the first eps file (A-M). This places 
the outlines into the box plus the grid from this file. 


Using your backup file, add the grid you 

produced earlier to each line of the font, 
making sure you place the baseline in the correct 
position. The grid is very important when importing 
shapes into Fontographer; without this you won't 
be able to accurately place your letter forms. 


5 | Repeat the same process as in the previous 
step, and bring in the other files in their right 
position. Then get hold of the grid and work out 
accurately within the box where the baseline grid 
will be and the ascenders and descenders. You may 
have to scale the grid up to fit into the box; make 
sure you place the grid into the Guides layer. 


Now save three separate files of each 
individual set of glyphs. In this case we've 
saved letters A-M, N-Z and the numerals as 
individual eps files. It's important that each file is in 
eps format, otherwise you won't be able to import 
them into Fontographer. 


6 | Once the grid is in place, go back to the 
imported files and copy/paste each character 
into its rightful place. The shapes don't fit to the 
shape of the grid. Scale the characters to the grid by 
highlighting them all as a group and scaling them up 
by the same amount that you scaled up the grid. > 
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Streamline your font continued... 


Vector programs 
rule! 


Always use a vector-based 
program when illustrating each 
individual glyph. Try not to use 
Fontographer to draw complex 
shapes — it can be a bit of a pain 
if you're new to the program, so 
stick to what you know best. You 
can save time and effort if you 
import your glyphs into 
Fontographer by saving vector 


files as eps's. 


Once you're happy with the scale of the 
characters, highlight them all again. Then open 
up the metrics window and change the side 
bearings. This quickly changes the space at the side 
of each character. Do this for both left and right and 
you'll be able to work on each character easier. 


Although this font is for display use, you may 
need to kern some of the characters so they 
look perfectly spaced against each other when 
typed out. The kerning value appears in the bottom 
line of the Metrics window. As you type each letter, 
you should add either a lower or higher percentage 


to the kerning value if a character looks out of place. 


Also use this window to tighten characters against 
each other or lengthen them away. 


baseline. This particular font has characters 
that need to be placed to the baseline in different 
ways. In Fontographer you can snap shapes to the 
baseline by highlighting them and moving them 


onto it. Do this for every character. 


Name your font for screen use, so that its 
name appears in every application you wish 
to use it in. 


g Now that the font is accurately in place and all 
the characters are perfectly shaped to the grid, 
you need to make sure the font's in working order. 
First, ensure that the font has a 100 per cent fill (all 
fonts should have this), then ‘Remove Overlaps’ 
and ‘Correct Path Direction’. This command is very 
important for your font to work, because it makes 
sure the holes in your ‘o' appear in other programs. 


eampuker arks 
kype special 


Produce a PostScript of the font - in this 
instance, we've created a Mac PostScript. 
You'll need to give it a name, and a unique 
PostScript ID so that your printer can read it. If you 
want to produce bitmaps (although these are rarely 
used these days) save these files in a folder so you 
can use it. Once you've got the PostScript, put this 
into your font system and begin to use it in your 
desired vector program to produce illustrations. 


Part 3: Tag your work 


You've got the font, now use it! This section shows you how to produce original artwork 
using elements directly taken from the typeface... 


This illustration uses all of the characters from 

the typeface and also the three shapes we 
originally produced to create the font. You can now 
play around with your specially selected ‘dub’ 
colours to arrange a simple but effective illustration. 
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Once you've created the environment and the 
look of the piece, you can import it to 


Photoshop to add certain effects or you can use it as 
a base to produce pieces on canvasses or walls. 


Begin by opening the eps illustration, and 

checking its composition and size. When 
working with graphic shapes or type, it's best to 
import them without a background, so you have the 
choice of adding textures and different treatments 
to the final piece. 


Photographing 
textures 


When applying texture to your 
work in Photoshop, try to use 
‘hi-res’ photographs of various 
textures that you can find on the 
street. Take photos of brick walls, 
Pavements and even roads. Your 
work will then literally become 
‘digital street art’. Our favourite 
texture is sand, because it has 
the texture of a wall, and also 
mimics ‘aerosol spray paint’ 


splashes perfectly. 


G Getting a perfect ‘aerosol spray can’ effect is 
done by cleverly duplicating your graphic 
object layer. Use the blur filters on each graphic 
layer and randomly re-position them, then apply 


4 | Now you're happy with the positioning of 
your graphic objects, you can add your 
texture. Here we've used a sand-based texture, 
and have simply coloured it blue by using the 
channel mixer. 


your texture layer over the top. Once this has been 
done, apply an ‘untouched’ graphic object layer 
over the top of everything, and turn the layer to 
Hard Light. As with any Photoshop technique, it 
takes a while to get a perfect balance 


G Once you're satisfied with your ‘spray can’ 
effect, apply the final graphic shapes, to give 
your artwork that finishing touch. We normally use 
flat colours, which helps to avoid a cluttered look in 
the final illustration. CEES 
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DESIGNER 


Rinzen 


“We're all going in directions that maybe we wouldn't have if 
we'd been working individually.” That, according to Rilla 


Alexander, is the beauty of Rinzen... 


he five-strong Australian design house 
( Rinzen was founded in 2000 by Rilla and 
4 Steve Alexander, along with Adrian Clifford, | 
Craig Redman and Karl Maier, and it's been 
a melting pot of creative juices in their Queensland 
base ever since. “The idea of us all working together is 
that there's a lot of cross-pollination of ideas, so 
effectively even though we've all got our own style, 
since we've all been working in the same office our 
styles and ideas have blended and merged.” | 

The group came together as a result of a happy 
coalition in their pioneering RMX design remix project 
(see ‘Remixed, refreshed’ for more on this). 

“It [RMX] was the thing that brought us all together 
and decide to be Rinzen. The other guys were all 
working in their corporate jobs and we'd just come 
back from Germany so we thought, yeah, let’s do this 
fun project,” recalls Rilla. “Unlike most people who say 
‘let's start a company’, we were doing this project and 
received such good comments from everyone and 
enjoyed working together so much, that’s how the 
whole thing started.” 

A lot of Rinzen’s work is for arts organisations, 
festivals, fashion and music houses — creating CD 


Remixed, refreshed 


The RMX project is what brought Rinzen together and made 
the team’s name. The idea of the project was for each person 
to create an initial piece of design and then for everyone 
else in the group, one by one, to remix that design in any 
way they saw fit. 

When they exhibited the results of the project in Berlin, 
they were flooded with requests from other designers who 


wanted to get involved. Thus was born the much bigger 


covers, flyers and posters, that sort of thing. Recent 
creations include Absolut Vodka online concepts, 
branding for Tokyo Designers Block 2002, interstitial 
animations for German music TV station Viva Plus, 

an online piece for Italian clothing label Diesel, and 
T-shirt graphics for the Australian clothing brand 
Mooks. However, Rilla and her colleagues are now 
producing their own work as well. They are currently 
selling posters via their Website, and they're hoping to 
have T-shirts for sale there soon too. 

Most of their client work is produced, or at least 
directed, by just one or two members of the group. 
However, that doesn't stop anyone else from pitching 
in with ideas. And they don't all need to be in the same 
place to maintain this collaborative approach. Email 
and ICQ keep the inter-Rinzen discussion going when 
team members are working away from the office. 

Given this mobile ethos, it’s not surprising that 
laptops are the tools of the trade for Rinzen. Three G4 
laptops and two iBooks to be precise. Their software of 
choice is FreeHand, which all the designers know like 
the back of their hands. They don't have much truck 
with /llustrator, but Fireworks, Flash and Dreamweaver 
are allin their arsenal as well. > 


RMX/Extended Play project, which involved 30 people and 
took four months. Brave decision (and perhaps a little 
foolhardy you might think) to let other designers mess with 
your work, but, according to Rilla, it turned out to be a very 
refreshing experience. 

“It was a really nice creative outlet, doing something that 
was completely in your own control. And then sending it off 


to be completely out of your control, but in a nice way.” 


The RMX project brought Rinzen together, and the RMX/Extended Play project took the idea to another level. These area 
selection of pieces from Rinzen’s book RMX Extended Play published by Die-Gestalten Verlag, Berlin, and available from 


design book stores internationally. 


1, Illustration and Logotype Design for Tokyo 
Designers Block (October 2002). Sputnik 
was an exhibition forming part of Tokyo 
Designers Block. The design direction was 
led by the decision to brand the event as 
“Sputnik Spacelines’, complete with 
airline-style in-flight packs. 


2. These two pieces — the cover for the 
band Waikiki’s new single Here Comes 
September, and the poster for the 
Bananageddon music festival — are good 
examples of Rinzen’s basic approach, a 
combination of illustration and 
customised typography. 
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1. These are mobile phone 
graphics created for Yakuta 
(Finland). The challenge here was 
working within pixel dimensions 
supplied by Yakuta. The 
illustrations were created in 
FreeHand and finished in 
Photoshop. 


2. This is the artwork for the 
CD and DVD cover of 
Regurgitator’s ‘Best of Album. 
According to Rilla, this takes 
Rinzen’s method of working to 
an extreme, using typography 
as an illustrative element. 


3. This six-page ‘illustrated 
fashion spread’ for Black and 
White Mode magazine includes 
custom-designed logotypes for 
the fictitious DJs playing at ‘The 
House House’. The brief was to 
design the spread so that it 
incorporated a huge range of 
labels from Diesel to Prada, but 
with only the brands’ Websites 
for reference. 
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And continuing the Macromedia theme, the folk at 
Rinzen get a fair deal of use out of Fontographer too, 
as Rilla explains: “Typography is something we're well 
known for. When we do a logo ora poster for someone, 
we do tend to create our own custom typeface. In 
some cases, we might only have to create five letters 
to fulfil the job, but other times we do that and then 
think it’s fantastic and do the whole alphabet. We use 
Fontographer for this.” 

When they are creating these bespoke fonts, Rilla 
and her colleagues draw each of the letter forms in 
FreeHand before moving into Fontographerto render 
the alphabets there. Some of Rinzen's typographic 
work is the design of custom typefaces for magazines 
and other printed media, where it's important to get 
the minutiae right, like letter spacing, to ensure it’s 
usable as a workaday type. 


Flash fonts 


They've also produced fonts for the Web; the typeface 
on Rinzen's own site, for example, was designed 
specifically for Flash, so it sits on perfect pixel and 
doesn't have any anti-aliasing. But when it gets the 
chance, Rinzen prefers to get a lot more creative with 
its use of fonts. Rilla explains: “Type can become an 
illustration itself because it’s actually saying a lot 
about the thing that you’re doing. The place you do that 
a lot is with something like a flyer where you may not 
actually integrate any traditional imagery at all. What 
you end up doing is creating a design that’s purely 
typographic. You’re actually creating logos, it’s just 
that they're typographic.” 

It’s this emphasis on the power of typography as an 
illustrative medium in its own right and pushing the 
standard notion of the letterform that makes its work 
stand out from other designers. In fact, Rinzen would 
like in the future to be in the position of always being 
able to use its own fonts in its designs, and perhaps 
sell them to others as well, though the designers 
would be a little wary about what others might do with 
their typographic babies. 

“Selling our fonts is something we've considered. 
We actually gave away some of our fonts on an IDM 
CD a while ago and it was interesting to see how 
people used them, because they'd use them in ways 
we'd never imagined. Sometimes absolutely terribly, 
but at other times it’s really interesting to see what 
other people do with our stuff.” 

That's an occupational hazard that Rilla and the rest 
of Rinzen are probably going to have to learn to live 
with as word spreads about their custom fonts. The 
more people see their typographic work, the more 
they're going to ask to use it. You can't really ask for 
much more of a compliment than that. EEE 
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1. This font, cunningly named Boggles, was 


“I need to preserve the freedom to use all graphical forms of 
expression,” says Frenchman Patrick Lindsay, whose typographic 
creations are derived from a desire to have a little fun... 


here's a strange mix of themes and 
( influences going on at Patrick Lindsay's 
Website: the childish and playful alongside 
the erotic, and pixelated typefaces 
alongside classic fonts. “| don't think | have a particular 
style,” he explains. “Many of my fonts are conceived 
through objects or toys, but in general, | construct my 
visuals with simple elements that combine to become 
something more complex.” 

The Marseille-based illustrator and typographer 
prefers to keep his options open, claiming that his 
playful side is more of a spirit than a style. “Personally, 
| need to preserve the freedom to use all graphical 
forms of expression. Faced with a client, the most 
relevant solution could well be a photograph or oil 
painting,” says Patrick. 

But more often than not, the solution for Patrick's 
clients, which range from the national press to local 
restaurants, involves his own mix of illustration and 
typography. “When a client asks for branding, | always 
recommend creating an entire font family from scratch 
in order to reinforce their identity rather than just going 
with a plain old logo. Unfortunately, most of them 
prefer to go with what everyone else has.” 

Patrick came to this profession during the 
‘typographic explosion at the end of the Eighties, while 
he was still a student. Aided by new technologies, 
typography became a major element in his illustrative 
work. “There is real pleasure in manipulating lettering 
and it plays such a role in my visuals,” explains Patrick. 
“I'm not really sure where the illustration stops and the 
typography begins; there's no definitive line between 
the two and that’s really important for me.” 


inspired by the word game Boggle. 


2. A child’s construction game was the idea 
behind Pipo, another of Patrick’s fonts that's 
available on his Website. 


3. Cagna finds its inspiration in magnetic 
fridge letters. 


4. Created in the form of a puzzle, Pousse... 


5. The keys on a computer keyboard 
influenced this font, named Shift. 


6. Another inspired font, Digest comes in 
both white and black. 


7. Ossobuco was inspired by electronic 
writing machines. 


When pressed, Patrick sees himself more as an 
illustrator than a typographer: “My fonts are created 
specifically for use as illustrative headlines. Real 
typography is a very dedicated profession that 
demands patience and precision; people devote their 
entire lives to it.” 

It’s hard to pin down the creative processes of a man 
who prefers to have no rules. But /llustrator, 
Fontographer, Photoshop and Streamline are among 
the tools he uses, and his platform of choice? “La 
pomme.” His work differs immensely, depending on 
the time he has to complete a project. “If there isn't 
much time, | don't hesitate to re-use graphical 
elements from my existing work to create new 
imagery. But with more time, I'll spend two or three 
days trying out different styles from which I'll pull out 
unexpected shapes. In any case, | only ever havea 
vague idea of the final visual. It’s only on the computer, 
when I’m manipulating all the elements, that the 
image builds itself.” 

Pixelated fonts, like some of those featured on 
these pages, are a style that Patrick enthuses about. 
“These fonts are optimised for use on the screen — 
they're built entirely out of pixels,” he explains. “I think 
they bring new blood to the design of print characters. 
Until now, it was print that was influencing the Web, 
but these days | get the impression that things are 
turning the other way.” EEE 
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London College of Music & Media 


A Faculty of Thames Valley University 


The best creatives 
think ahead. 


The London College of Music & Media (LCMM) at Thames Valley University, 
can help you prepare for a career in media. By embracing new technologies 
and methods, and developing courses with the help of key industry figures, 
we can help you to develop knowledge and skills that are relevant, practical 
and meet the demands of employers. 


* Computer Arts * Interactive Software Development 
* Design for Interactive Media Media Technology 
* Digital Animation * Multimedia Computing 


* Digital Arts * Photography and Digital Imaging 


For further information about these and all LCMM courses, please contact us, 


Thames Valley University supports mass participation in higher education 


e-mail: enquiries.icmm@tvu.ac.uk 
web: http://elgar.tvu.ac.uk 


Tel 020 8231 2304 


London College of Music & Media 
Thames Valley University, 
St Mary’s Road, Ealing, London W5 5RF 
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High quality, great value day and evening courses in 
all design applications from beginners to advanced 


Including: 
Photoshop. Dreamweaver. Flash. 3D Studio Max. 
Final Cut Pro. DVD Studio Pro. After Effects. 


020 7553 4473/3029 
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Expert Training by Creative Professionals 


including 
Dreamweaver 
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Illustrator 
Flash 

HTML 


0208 871 4589 


WEB, GRAPHICS, MULTIMEDIA 
STRUCTURED OR TAILORED COURSES 
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info@matrixtraining.com 
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training in a different class 


metro new media 


Intensive Scheduled & 
Customised Courses in 


3DS 
Graphics 


Multimedia 
Video 
Internet 


www. metronewmedia.com 


Please visit our web site for a full training portfolio 


[t] 020 7729 9992 
[e]training@mnm.co.uk 
35 Kingsland Rd 
Shoreditch London E2 8AA 
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bespoke training scheduled courses evening classes 


typography programming image editing 
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dtp systems video 
3d office web 
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FLASH GAMES 


TUTORIALS 

+ CREATE A SPACE INVADERS-STYLE GAME 

+ DESIGN A COOL TETRIS—-STYLE PUZZLER 

+ MAKE AN ASTEROIDS SHOOTING GAME 

+ HOW TO ADD SOUND TO GHARACTER MOVES 
+ USE VIDEO CLIFS WITHIN FLASH GAMES 

+ SYNC SPEECH TO MOUTH MOVEMENTS 

+ DESIGN A FRELOADER FOR YOUR GAME 


FEATURES 

+ WHAT MAKES A FLASH GAMES PLAYABLE 
+ G-MAX SKATEBOARDING: DESIGN SECRETS 
+ FLASH GAMES DESIGN TIFS FROM KERE 


orf THE CO 

FULL AMO FREE MACROMEDIA FLASH EXTENSIONS 
FREE SOUNDS SCOREKEEPER + Create your own leaderboard 

WWW SOUNO-EFFECTS—LIBRARY.COM TETRIS EXTENSION + Tetris—style preloader 


SIMPLE EFFECT LIBRARY + New zoom and fade effects 
GAME CONTROL V1.0 + Readymade game controllers 
SIMPLE JOYSTICK + Joystick simulation component 


On sale Thursday }9 DECEMBER 


Updates at Cw] www.computerarts.co.uk 


Reserve your copy today 


GET IT BEFORE ANYONE ELSE erdeveryurcapyot 
B or deliver your copy of 
Computer Arts Special to 
your door every month. 
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Sc one of the new additions to the Monotype Classic Library 


A clean, calm, highly-legible contemporary typeface family 
APSDEFGHUKLMNOPQRSTUVWXYZ(19)0123456789abcdefghijkimnopgrstuvwxyz(aij) 


Scene Regular 1opt. 

If you're looking for a distinctive and yet easy-to-use sans serif font family then take a look at Scene. Designed between 2000-2002, 
it’s aclean contemporary communication tool that can give a strong and sophisticated voice to corporate identity and general 
design projects. Much of Scene’s legibility lies in an x-height that sits comfortably between that of Helvetica® and Verdana® 


Scene Medium Alternative 1opt. 


Open counters & generous ascenders and descenders, familiarity of form and a close attention to spacing and kerning all play key 
roles in ensuring high legibility in print and on screen. Designed by Sebastian Lester (one of Agfa Monotype’s type designers) 
Scene comes in pure sans form with a free ‘semi-sans’ style that introduces more distinctive word rhythms and letter shapes. 
Scene Bold Alternative 1opt. 


The designer says, “I’m very pleased with this font family. | hope and feel I’ve created something strong and yet subtle. A highly 
effective communication tool that has much to offer designers working in corporate identity and many other areas of design.” 


Light Mamburgefonstiv@123456789 & Light Alternative Hamburg 
Light Italic Hamburgefonstiv@12 3456789 & Light Italic Alternativ 
Regular Hamburgefonstiv@123456789 & Regular Alternative + 
Regular Italic Hamburgefonstiv@12 3456789 & Regular Italic Al 
Medium Hamburgefonstiv@123456789 & Medium Alternative | 
Medium Italic Hamburgefonstiv@123456 789 & Medium Italic A 
Bold Hamburgefonstiv@123456789 & Bold Alternative Hamb 
Bold Italic Hamburgefonstiv@123456 789 & Bold Italic Altern 
Black Hamburgefonstiv@123456789 & Black Alternative | 
Black Italic Hamburgefonstiv@123456 789 & Black Italic / 
Ultra Black Hamburgefonstiv@123456789 & Ultra Black 
Ultra Black Italic Hamburgefonstiv@123456789 & Ultra 


Experiment with Scene using our Interactive Type Sampler at www.agfamonotype.co.uk 
For a free font resource kit including the new Monotype Classic Library Catalogue call us and quote Computer Arts Magazine 


Call free on: 0800 371 242 Email us at: enquire.europe@agfamonotype.com 
Custom Fonts e Licencing « Fonts around the clock AGFA Monotype 
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